ng-model not coming in scope

Question

I am creating one app and i am not getting ng-model value in the scope of the controller. When the page is loading it is going to the controleer but the value is coming undefined from the ng-model to the scope of the controller. Here is html :

<form class="form-signin" id="loginForm">
    <h2 class="form-signin-heading">Por Favor Ingresar</h2>
    <label for="matricula" class="sr-only">Matricula</label>
    <input type="text" ng-model="matricula" id="matricula" class="form-control" placeholder="Matricula" required="" autofocus="">
    <label for="inputPassword" class="sr-only">Contraseña</label>
    <input type="password" ng-model="contrasena" id="inputPassword" class="form-control" placeholder="Contraseña" required="">
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="acuerdate" value="remember-me"> Acuérdate de mí
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" ng-click="login.getAuthenticate()" type="submit">Ingresar</button>
  </form>

The controller is below :

angular.module('myApp')
    .controller('LoginController', LoginController);

    LoginController.$inject = ["$scope",'LoginService','Common.Services.Navigation','Common.Constants.Routes'];

    function LoginController($scope,loginService,navigate,route){
      var login =$scope;
      var request ={'matricula':login.matricula}; /***Here the Value is undefined**/

      login.getAuthenticate = getAuthenticate;
      function getAuthenticate(){
        loginService.doRequest(request).then(function () {                      
            navigate.navigate(route.routes.cardDetails);
        }),function (error) {
          //Handle the Error Handle
          //Its pending to show Device native alert message 
          //or TOAD MESSAGE
        };
      }
    }

Please help me with your suggestions.

Answer 1

Move the assignment of the request object to inside of the getAuthenticate function.

  function getAuthenticate(){
    var request ={'matricula':login.matricula};
    loginService.doRequest(request).then(function () {                      
        navigate.navigate(route.routes.cardDetails);
    }),function (error) {
      //Handle the Error Handle
      //Its pending to show Device native alert message 
      //or TOAD MESSAGE
    };
  }

When your controller is first initialized, the value will be undefined.

But if you do what @charlietfl suggests then it can work similar to the way you have it above.

One way of using an object to do your ng-model bindings is by creating the object in your controller and then referring to that object in the html.

Template:

<input type="text" ng-model="login.matricula" id="matricula" class="form-control" placeholder="Matricula" required="" autofocus="">
...
<input type="password" ng-model="login.contrasena" id="inputPassword" class="form-control" placeholder="Contraseña" required="">

Controller:

function LoginController($scope,loginService,navigate,route){
  var login = {
    matricula: null,
    contrasena: null
  };
  $scope.login = login; // expose the above login object as login on the scope

  // now the request object will always have the model value when it accessed
  var request ={'matricula':login.matricula}; /***Here the Value is undefined**/

  ...
}

Or the recommended way with the latest angular is actually to use the "controller as" syntax. Then you don't need to use $scope in your controller and bind the variables to this .

Template:

<div ng-controller="LoginController as login"> <!-- note this change -->
  <input type="text" ng-model="login.matricula" id="matricula" class="form-control" placeholder="Matricula" required="" autofocus="">
  ...
  <input type="password" ng-model="login.contrasena" id="inputPassword" class="form-control" placeholder="Contraseña" required="">
  ...
  <button class="btn btn-lg btn-primary btn-block" ng-click="login.getAuthenticate()" type="submit">Ingresar</button>
</div>

Controller:

// no more $scope dependency needed
function LoginController(loginService,navigate,route){
  var login = this; // store a reference to 'this' as login
  var request ={'matricula':login.matricula}; 

  login.getAuthenticate = getAuthenticate;
  function getAuthenticate(){
    ...
  }
}