Does the ng-click event not fire when a button is clicked?

Question

I create a web application in Angularjs, I write the code in a separate .js file to enter from the is database, it is executed when the page loads, but it does not start when the button is clicked, my .js code:

var adminModule = angular.module('angApp', []); //Defining a Angular Controller adminModule.controller('AdminCtrl', ['$scope', '$http', function ($scope, $http) { Login(); function Login(U_Name, U_PWD) { debugger; //Defining the $http service for login the admin user $http({ method: 'POST', url: '/Admin/IsAuthenticate', data: { User_Name: U_Name, User_PWD: U_PWD } }).success(function (result) { if (result == true) { alert('user is valid'); } else { alert('unauthorised access!'); } }).error(function (error) { //Showing error message $scope.status = 'Unable to connect' + error.message; }); } }]); 

and I believe that what I use to bind this with Angularjs is the problem above, the code works on loading the page, but doesn’t work when the button is clicked, the code I use:

 <div class="admin-login" ng-controller="AdminCtrl" ng-app="angApp"> <h2>using angularjs</h2> <input type="text" id="txtUserAng" placeholder="User Name" ng-model="U_Name" /> <input type="password" id="txtPWDAng" placeholder="Password" ng-model="U_PWD" /> <input type="button" id="login" value="login" ng-click="Login()" /> </div> 

someone please help me what i'm missing here so i cannot trigger the ng-click event when the button is clicked thanks in advance.

Answer 1

Your Login function should be in scope. Right now its essentially a private function:

 $scope.Login = function () { ... } 

Answer 2

Assign a function to a scope variable.

 var adminModule = angular.module('angApp', []); //Defining a Angular Controller adminModule.controller('AdminCtrl', ['$scope', '$http', function ($scope, $http) { $scope.Login = function (U_Name, U_PWD) { debugger; //Defining the $http service for login the admin user $http({ method: 'POST', url: '/Admin/IsAuthenticate', data: { User_Name: U_Name, User_PWD: U_PWD } }).success(function (result) { if (result == true) { alert('user is valid'); } else { alert('unauthorised access!'); } }).error(function (error) { //Showing error message $scope.status = 'Unable to connect' + error.message; }); } $scope.Login(); }]); 

Edited by:

try using this html code but i'm not sure. It is possible that both ng-init and ng-controller are in the same div and ng-controller are loaded first after this ng-init:

 <div ng-app="angApp"> <div class="admin-login" ng-controller="AdminCtrl" > <h2>using angularjs</h2> <input type="text" id="txtUserAng" placeholder="User Name" ng-model="U_Name" /> <input type="password" id="txtPWDAng" placeholder="Password" ng-model="U_PWD" /> <input type="button" id="login" value="login" ng-click="Login()" /> </div> </div>