Angular $scope variables not updating in controller

Question

My variables are not updating in the controller and I have no idea why.

In the view I have this code

<div ng-if="state_1">
    <input ng-model='amount'> {{amount}} <!-- this binds perfectly -->
    <button ng-click='submitForm()'>Submit</button>
</div>
<div ng-if="state_2">
    <input ng-model='txcode'> {{txcode}} <!-- this binds perfectly -->
    <button ng-click='submitCode()'>Submit</button>
</div>

In the controller:

angular.module('myapp')
   .controller('RecCtrl', function($scope, $state, $rootScope, $http) {
      $scope.submitForm = function(){
         console.log($scope.amount);    //returns undefined 
      }
   })

I followed this answer and worked around it by passing the amount into submitForm() from the view. But now I need to use a value from $rootScope but nothing shows. Nothing works in this controller except for that $scope.submitForm(). Every other controller is working fine.

If it will help, there are 2 states using the same controller and template like so:

//initiate payment tx 
    .state('rec', {
      url: '/receive',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

    //claim payment tx 
    .state('claim', {
      url: '/claim',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

I use the $state.current.name to separate the functions. But I have tried deleting the other one, it still didn't work. Other controllers are working fine.

Shouldn't this `$scope.submitForm(){}` be `$scope.submitForm = function(){}`. — Ravi Teja, Oct 08 '16 at 12:14
Do you have `ng-if`, `ng-repeat`, `ng-include` or other directives in your HTML file? I you can show your complete html it will help. — Ravi Teja, Oct 08 '16 at 12:20
Yeah, I have ng-if. That is how I separate the 2 states. I've update the code to show the rest of the html @RaviTeja — iKey, Oct 08 '16 at 12:23

score 9 · Accepted Answer · edited May 23 '17 at 12:01

ng-if creates a new scope. So, you cannot directly use primitive values, use reference values.

If you use primitive values they will be local to ng-if scope. So, you cannot access them from your controller.

If you use reference value, ng-model checks if the value exists in ng-if scope, if it does not then it looks the value in parent scope which is RecCtrl scope in this case.

This link will help you to understand why you should use reference values.

angular.module('myapp')
   .controller('RecCtrl', function($scope, $state, $rootScope, $http) {
      // use a reference value
      $scope.details={};
      $scope.submitForm = function(){
         console.log($scope.details.amount);   
      }
   })

HTML

<input ng-model='details.amount'> {{details.amount}} 
<button ng-click='submitForm()'>Submit</button>

It worked, thank you. I removed the ng-if completely. Too much headache! — iKey, Oct 08 '16 at 13:07

Angular $scope variables not updating in controller

1 Answers1