Why is the Angular Digest Cycle not being called?

Question

I have two controllers and a factory. I am injecting the factory and a controller into a main controller, here are the code snippets below:

Factory:

app.factory('TallyFactory', function(){ return { correct: 0, incorrect: 0 }; });

TallyController that accepts the TallyFactory:

app.controller('TallyController', function($scope, TallyFactory){ $scope.$watch('scores', function(newValue, oldValue){ console.info('changed!'); console.log('Old: ' + JSON.stringify(oldValue)); console.log('New: ' + JSON.stringify(newValue)); }); $scope.scores = TallyFactory; });

MainController which accepts the TallyFactory and changes the value of the TallyFactory Object:

app.controller('MainController', function ($scope,TallyFactory) { $scope.addTally = function(){ TallyFactory.correct++; } });

Notice in my TallyController (second snippet), I added a watcher to the $scope, listening for when "scores" changes.

When I run the "addTally" function from my MainController with an ng-click, it changes the value of my Factory Object (TallyFactory). Since there was a change, and I specifically created a watcher on my TallyController ($scope.scores), shouldn't the digest cycle be triggered and my console update with the new value of my TallyFactory?

Also, my TallyController is NOT nested in my MainController, they are separate from each other (not 100% sure if that matters).

I'm not sure why the Digest Loop isn't triggered since the TallyFactory changed values.

should work even without the $watch. Create a demo that replicates problem — charlietfl
– charlietfl, Commented Aug 19, 2015 at 23:22
You're watching the wrong thing. $scope.$watch('scores.correct', ... — HankScorpio
– HankScorpio, Commented Aug 19, 2015 at 23:24
do you have both controllers loaded on the same page? because how does your app load the TallyController? — Babajide Fowotade
– Babajide Fowotade, Commented Aug 19, 2015 at 23:27
Just so it's clear what I meant, when you say that "it changes the value of my Factory Object (TallyFactory)" that's not actually correct. It changes a property of TallyFactory, but TallyFactory itself remains unchanged. For a deep watch, add true as the 3rd argument on the watch. $scope.$watch('scores', function(){}, true) — HankScorpio
– HankScorpio, Commented Aug 19, 2015 at 23:31
@Claies The comment is misleading, it is the correct use for factory (though value is shorter). The object returned by this factory is the same every time the service is injected. It won't be a singleton otherwise. — Estus Flask
– Estus Flask, Commented Aug 20, 2015 at 1:30

Estus Flask · Accepted Answer · 2015-09-02 11:47:16Z

2

$scope.$watch('scores.correct', function(newValue, oldValue){ ... });

to watch for particular property. And

$scope.$watchCollection('scores', function(newValue, oldValue){ ... });

to watch for all of them.

Consider using deep $watch

$scope.$watch('scores', function(newValue, oldValue){ ... }, true);

instead if scores properties may contain objects.

In comparison with deep $watch, $watchCollection provides significant performance boost even for simple shallow objects. Here is profiler timeline for $watchCollection:

While deep $watch profiler timeline will look like this:

edited Sep 2, 2015 at 11:47

answered Aug 20, 2015 at 2:15

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

5 Comments

shaunhusain Over a year ago

scores is just pointing to an object here so using the deep equality check is what fixes the problem. The issue is the factory object itself isn't changing only the properties within it, but like you said if it were an array the watchCollection makes sense, and adding the third param for deep equality check true fixes the issue.

Estus Flask Over a year ago

@shaunhusain $watchCollection is the use case for arrays and shallow objects (and scores is shallow object).

shaunhusain Over a year ago

oh huh well that's interesting just checked out the docs you are correct, I wonder if there is any actual performance difference in the watchCollection vs a deepEquality check in a regular watch for a shallow object.

Estus Flask Over a year ago

@shaunhusain I've added profiler data to the answer. Yes, there is apparent performance difference.

shaunhusain Over a year ago

Interesting stuff thanks for sharing the profiling results

shaunhusain · Accepted Answer · 2015-08-20 02:29:23Z

I had some doubts about the exact correctness of the answer but after copying your code into a snippet that can be run I just verified here that estus' answer is acceptable.

angular.module('app', []) .controller('TallyController', function($scope, TallyFactory){ $scope.scores = TallyFactory; $scope.$watch('scores', function(newValue, oldValue){ alert('changed!'); console.log('Old: ' + JSON.stringify(oldValue)); console.log('New: ' + JSON.stringify(newValue)); }, true); }) .factory('TallyFactory', function(){ return { correct: 0, incorrect: 0 }; }) .controller('MainController', function ($scope,TallyFactory) { $scope.addTally = function(){ TallyFactory.correct++; } });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div ng-app='app'> <div ng-controller="TallyController"> {{scores}} </div> <div ng-controller="MainController"> <button ng-click="addTally()">Add Tally</button> </div> </div>

Collectives™ on Stack Overflow

Why is the Angular Digest Cycle not being called?

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related