Angular model not binding data

Question

I cannot explain (probably I'm blind!!) why I can't get value from $scope using ng-model in the following code:

var appModule = angular.module('publicApp',[]);


appModule.controller("changePasswordController",
 function($scope, $location, mainService) {
  
  $scope.sendChangePassword = function(){

   alert('password: ' + $scope.password + '\n' + 
     'password_rpt: ' + $scope.password_rpt + '\n' + 
     'user: ' + $scope.user + '\n' + 
     'token: ' + $scope.token + '\n' 
     );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app="publicApp" style="padding: 50px">
    <div class="row-fluid">
        <form name="form" novalidate="novalidate">
            <span ng-controller="changePasswordController">
                <input type="text" name="user" id="user" ng-model="user" value="xxxxxxxx.yyyyyyyyyyy@mail.com"
                       style="display: none;"/>
                
                <input type="hidden" name="token" id="token" ng-model="token"
                       value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0NTU3MTg2NjEsInVzZXJJZCI6ImZyYW5jZXNjby5kaXBhc3F1YW50b25pb0BnbWFpbC5jb20iLCJyb2xlcyI6WyJub25lIl19.Uzw2GuPhxagfeEESL9WF3RAC7upZFudJpag6Jjl2KQk"/>
                
                <div class="input-group input-sm">
                    <input class="form-control" type="password" required id="password" name="password" ng-model="password"
                           placeholder="inserisci password"/>
                </div>
                <div class="input-group input-sm">
                    <input type="password" class="form-control" id="password_rpt" name="password_rpt"
                           ng-model="password_rpt" password-match="password" required placeholder="ripeti password"/>
                </div>
                <div>
                    <input type="button"
                           class="btn btn-primary btn-default" value="Change Password"
                           ng-click="sendChangePassword()"/>
                </div>
            </span>
        </form>
    </div>
</body>

In My running code I can get only $scope.password value, rest of variables are undefined!

This is what the alert print:

Possible duplicate of [Angular js init ng-model from default values](http://stackoverflow.com/questions/13769732/angular-js-init-ng-model-from-default-values) — Shashank Agrawal, Feb 17 '16 at 13:54

score 3 · Answer 1 · answered Feb 17 '16 at 12:00

3

Your module is not created the right way. Try changing this:

var appModule = angular.module('publicApp');

into this:

var appModule = angular.module('publicApp', []);

answered Feb 17 '16 at 12:00

Peter

1,240
2
13
22

angular.module('app', []) is to create a new module without any module dependency. angular.module('app') is to retrieve an existing module whose name is app. – Dark Army Feb 17 '16 at 12:07
Yes that is true, but i can't assume that the OP has allready created the module before. – Peter Feb 17 '16 at 12:09
Sorry, it's a copy/paste error, in my running code it's running fine and I can see the alert. – Francesco Di Pasquantonio Feb 17 '16 at 12:10
@FrancescoDiPasquantonio look at this plunker: [link](https://plnkr.co/edit/bMPbTmmSKltq5KgVwmbT?p=preview) i had to remove the service `mainService` to try your code and i have `password` & `password_rpt` are nicely filled in. The other values like `user` and `token` have to be defined inside of your controller. – Peter Feb 17 '16 at 12:39

Shashank Agrawal · Accepted Answer · 2016-02-17T13:12:30.233

You need to initialize the default values like below in your controller:

var appModule = angular.module('publicApp', []);


appModule.controller("changePasswordController",
  function($scope, $location) {

    $scope.user = "xxxxxxxx.yyyyyyyyyyy@mail.com";
    $scope.token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0NTU3MTg2NjEsInVzZXJJZCI6ImZyYW5jZXNjby5kaXBhc3F1YW50b25pb0BnbWFpbC5jb20iLCJyb2xlcyI6WyJub25lIl19.Uzw2GuPhxagfeEESL9WF3RAC7upZFudJpag6Jjl2KQk";

    $scope.sendChangePassword = function() {

      alert('password: ' + $scope.password + '\n' +
        'password_rpt: ' + $scope.password_rpt + '\n' +
        'user: ' + $scope.user + '\n' +
        'token: ' + $scope.token + '\n'
      );
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app="publicApp" style="padding: 50px">
    <div class="row-fluid">
        <form name="form" novalidate="novalidate">
            <span ng-controller="changePasswordController">
                <div class="input-group input-sm">
                    <input class="form-control" type="password" required id="password" name="password" ng-model="password"
                           placeholder="inserisci password"/>
                </div>
                <div class="input-group input-sm">
                    <input type="password" class="form-control" id="password_rpt" name="password_rpt"
                           ng-model="password_rpt" password-match="password" required placeholder="ripeti password"/>
                </div>
                <div>
                    <input type="button" class="btn btn-primary btn-default" value="Change Password"
                           ng-click="sendChangePassword()"/>
                </div>
            </span>
        </form>
    </div>
</body>

If the user and the token is being generated and rendered by the server in HTML form, then you should avoid it. It is common mistake of using ng-model with value attribute in Angular.

In case, you are bound to initialize the values of token & user, then instead of assigning them in the hidden input fields, you should render them as a global variable probably in the head section like this:

<head>
    <script>
         window.globalData = {
               user: "xxxxxxxx.yyyyyyyyyyy@mail.com",
               token: "your-long-token"
         };
    </script>
</head>

Now, read those variables in the controller using the $window (an Angular wrapper of window object:

$scope.user = $window.globalData.user;
$scope.token = $window.globalData.token;

Angular model not binding data

2 Answers2