unable to pass username and password to controller from the html page in angular js

Question

i have two fields username and password that i want to get in the angular js controller to verify the login. but in the controller im not able to get it after filling the username and password and submitting the button

     <form class="form-signin" action="" method="post">
                        <span id="reauth-email" class="reauth-email"></span>
                        <input type="text" ng-model="username" id="Username" name="Username" class="form-control" placeholder="Email address" required autofocus>
                        <input type="password" ng-model="password" id="password" name="password" class="form-control" placeholder="Password" required style="margin-top:10px">
                        <div id="remember" class="checkbox">
                            <label>
                                <input type="checkbox" value="remember-me"> Remember me
                            </label>
                        </div>
                        <input type="hidden" name="" value="" />
                        <input class="btn btn-lg btn-primary btn-block btn-signin"  type="button" value="{{btntext}}" ng-click="login()" >
                    </form>

angular js

var app = angular.module('homeapp', []);
app.controller('HomeController', function($scope, $http) {
  $scope.username = '';
  alert($scope.username);
  $scope.btntext="Login";
  $scope.login=function () {
  $http.get("/account/loginverify")
  .then(function(response) {
    $scope.myWelcome = response.data;
    if(response.data=="1"){
      window.location.href='home.html'
    } 
    else  {
      alert("Invalid username  or password...!!!")
    }
  });
}
});

Answer 1

You need to bind your controller to the HTML template using ngController directive. See the following example:

 var app = angular.module('homeapp', []); app.controller('HomeController', function($scope, $http) { $scope.username = ''; $scope.btntext = "Login"; $scope.login = function() { console.log($scope.username, $scope.password); //$http.get("/account/loginverify") // .then(function(response) { // $scope.myWelcome = response.data; // if (response.data == "1") { // window.location.href = 'home.html' // } else { // alert("Invalid username or password...!!!") // } // }); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <form class="form-signin" action="" method="post" ng-app="homeapp" ng-controller="HomeController"> <span id="reauth-email" class="reauth-email"></span> <input type="text" ng-model="username" id="Username" name="Username" class="form-control" placeholder="Email address" required autofocus> <input type="password" ng-model="password" id="password" name="password" class="form-control" placeholder="Password" required style="margin-top:10px"> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <input type="hidden" name="" value="" /> <input class="btn btn-lg btn-primary btn-block btn-signin" type="button" value="{{btntext}}" ng-click="login()"> </form>