angular $scope.$watch on array calling update function

Question

In my plunk I have an array of integers, that I have attached $scope.$watch to. When I update the array, my $scope.$watch isnt firing a console.log. Why is my console.log not being called?

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="test" ng-controller="testArray">

    <div ng-repeat="item in MyArray track by $index"> {{item}}</div>
    <button ng-click="add()">testing Add</button>
  </body>

</html>
<script type="text/javascript">
    'use strict';
    var app = angular.module('test', []);

    app.controller('testArray',['$scope',function($scope){

      $scope.MyArray = [1,2,3,4]

      $scope.add = function(){
        $scope.MyArray.push($scope.MyArray.length+1);
      }
    $scope.$watch('MyArray' , function(){
      console.log($scope.MyArray);
    })
    }]);

</script>

Renan Ferreira · Accepted Answer · 2016-04-13 20:59:08Z

4

Change your code to

$scope.$watch('MyArray' , function(){
    console.log($scope.MyArray);
}, true)

Looking at the documentation, you will see that the third parameter indicate that the $watch method will use object equality to determine if your array has changed. It means that angular will use the angular.equals method that supports arrays comparison, for example

edited Apr 13, 2016 at 20:59

answered Apr 13, 2016 at 20:55

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AlainIb Over a year ago

if you set the third parameters to trus it mean that angular will make a deep watch over the object

gh9 Over a year ago

I decided to accept @pankajParkers answer because of the memory performance of watchCollection over using angular.copy

Pankaj Parkar Over a year ago

@RenanLopesFerreira & gh9 Thanks guys. I'd not have added an answer, if you cover the performance related stuff of deep watcher. So rather than do edit your answer.. I did added new answer. :-)

Renan Ferreira Over a year ago

@PankajParkar I didn't know about $watchCollection, so, thank you!

Pankaj Parkar · Accepted Answer · 2016-04-13 21:13:20Z

2

You could use $watchCollection, It would be less expensive than the deep watcher by just providing true option in $watch function.

$scope.$watchCollection('MyArray' , function(){
    console.log($scope.MyArray);
})

The $watchCollection() goes one-level deep and performs an additional, shallow reference check of the top level items in the collection.

If you have really big array on which you wanted to keep watch then don't go for $watch with true(deep watcher). For 1000/2000 records, you will feel lag in angular bindings. So preferred approach would be avoid watcher as much as you can OR just go for $watchCollection

edited Apr 13, 2016 at 21:13

answered Apr 13, 2016 at 20:56

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

angular $scope.$watch on array calling update function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related