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.

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.

• javascript
• angularjs

• Shouldn't this $scope.submitForm(){} be $scope.submitForm = function(){}. – Ravi Teja Commented Oct 8, 2016 at 12:14
• @RaviTeja It was a typo. I have updated it, thank you. – iKey Commented Oct 8, 2016 at 12:20
• Do you have ng-if, ng-repeat, ng-include or other directives in your HTML file? I you can show your plete html it will help. – Ravi Teja Commented Oct 8, 2016 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 Commented Oct 8, 2016 at 12:23

1 Answer 1

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>