$watch in Angular js-model cannot be accessed in controller

Question

I have tried using $watch to get the data entered in the

<input type="text"  ng-show="expense.done" ng-model="spentamount"  size="30"
                 placeholder="Enter the amount">

javascript:

  $scope.spentAmount = function() {    
angular.forEach($scope.expenses, function(expense) {
 if(expense.done){
 $scope.$watch('spentamount',function () {      
  console.log($scope.spentamount);
  });
 }
    });
    //return amount;
  };

HTML:

<label for="spentby">Spent by</label>
         <ul class="unstyled">
      <li ng-repeat="expense in expenses">
        <input type="checkbox" ng-model="expense.done">
        <span>{{expense.text}}</span>
         <input type="text"  ng-show="expense.done" ng-model="spentamount"  size="30"
             placeholder="Enter the amount"><span>{{addExpenseAmount()}}</span>      
             </li>
    </ul>
    <form ng-submit="addExpense()">
      <input type="text" ng-model="expenseText"  size="30"
             placeholder="Enter the names">
      <input class="btn-primary" type="submit" value="Add">
    </form><br>         
<label for="amountspent">Amount spent(Rs)</label>
 <span>{{spentAmount()}}</span><br>

But console.log($scope.spentamount) says 'undefined'

Is my usage of $watch correct?

Please advice

The use of $watch seems correct, but I'm not so sure about everything else (in part because most of that is not shown). The `spentAmount` function looks particularly suspicious because you're combining an asynchronous $watch with the intent of a return of a value at the end (based on the comment and its usage). It would help to know what you're trying to do, and a minimal jsfiddle that works and replicates the problem. — towr, Dec 31 '13 at 09:13

score 1 · Accepted Answer · answered Dec 31 '13 at 09:26

Your controller cannot watch "spentamount" variable because it is not defined in controller's scope but inside ng-repeat iteration scope.

See:

<li ng-repeat="expense in expenses">
    <input type="checkbox" ng-model="expense.done">
    <span>{{expense.text}}</span>
    <input type="text"  ng-show="expense.done" ng-model="spentamount"  size="30"
           placeholder="Enter the amount"><span>{{addExpenseAmount()}}</span>      
</li>

It means that when you type something in your input, spentamount is updated inside an internal scope:

$scope of your controller
  -> First ng-repeat iteration create a new scope
    -> New 'expense' and 'spentamout' variables are defined here
  -> Second ng-repeat iteration create a new scope
    -> New 'expense' and 'spentamout' are defined here

What you can do is apply a change event when spentamout is updated:

<li ng-repeat="expense in expenses">
    <input type="checkbox" ng-model="expense.done">
    <span>{{expense.text}}</span>
    <input type="text" size="30" placeholder="Enter the amount"
           ng-show="expense.done"
           ng-model="spentamount"
           ng-change="onAmountUpdated(spentamount, expense)">
    <span>{{addExpenseAmount()}}</span>      
</li>

In your controller:

$scope.onAmountUpdated = function(spentamount, expense) {
    console.log(spentamount, expense);
};

See this fiddle: http://jsfiddle.net/Pa633

You can initialize totalAmout in your controller and increment value in compute total value in onAmountUpdated function (I updated the fiddle). — Mickael, Dec 31 '13 at 10:29
Can we use two seperate controllers for a single view?I tried but only first controller is getting executed — user67867, Jan 02 '14 at 04:40
You can, but you will have to specify ng-controller attributes for both controllers. Note that both controllers will not be able to share data (but you can create a service that will store data to share between controllers). — Mickael, Jan 02 '14 at 08:15
Can you please take a look at http://stackoverflow.com/questions/20877783/multiple-controllers-in-angular-js? — user67867, Jan 02 '14 at 08:34

$watch in Angular js-model cannot be accessed in controller

1 Answers1