ng-click event is not firing on button click?

Question

i'm creating web application in Angularjs i write code in separate .js file for log in from database is is execute on page load but not triggering on button click, my .js code is:

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 my view as what i'm using for binding this using Angularjs here is an issue above code is working on page load but don't work on button click, the code i use is:

<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>

anyone please help me what i miss here so i'm not able to trigger ng-click event on button click thanks in advance.

Solution 1

Your Login function needs to be on a scope. Right now, its essentially a private function:

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

Solution 2

assign 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:

try to use this html code,but i am not sure.it may be that both ng-init and ng-controller are in same div and ng-controller load first after that 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>