AngularJS watch array of objects for data change

I’m implementing a shopping cart and want to store the data in localStorage. I want to watch the variable $scope.cart for change so that I can update the localStorage

The cart variable looks like this:

[{'name':'foo', 'id':'bar', 'amount': 1 },...]

This is the code for the watch.

$scope.updateCart = function(){
    alert('cart updated');

$scope.$watch($scope.cart, $scope.updateCart(), true);

This is the HTML where the user changes the model.

<li ng-repeat="item in cart">
  {{}} <input type="text" ng-model="item.amount">

With the following code, the updateCart() method is never triggered. I’m not sure what I’m doing wrong. I check that the $scope.cart variable did change, but the update was not triggered.


$watch only evaluate string or function parameter in its first argument. Change your $watch like this :

$scope.$watch(' + + cart.amount', $scope.updateCart());


$scope.$watch('cart', $scope.updateCart, true);

See reference API

Leave a Reply

Your email address will not be published. Required fields are marked *