AngularJS changing model value in one controller triggers model update in others

Question

EDIT:

Ok I update the example to avoid the loop problem, so back to the original question it sill recalculate B model objects.

In this example: http://jsfiddle.n

Answer 1

here is a working solution :

http://jsfiddle.net/m8xtA/1/

Using $watch is a good way to accomplish that.

function A($scope) {
    $scope.m='a';
    $scope.counter = 0;
    //executed each time `m' is changed
    $scope.$watch('m',function(){
        $scope.counter++;
    })
}
function B($scope) {
    $scope.m='b';
    $scope.counter = 0;
    //executed each time `m' is changed
    $scope.$watch('m',function(){
        $scope.counter++;
    })
}    

Hope this help, cheers

Answer 2

During the template rendering, if you change the model or object used for binding the template, it will trigger a new rendering cycle which will end up with a endless loop. It will cause this error 'Error: 10 $digest() iterations reached. Aborting!'.

In your code, when {{a()}} is being rendered, it modifies the object counter by the statement $scope.counter++;, which will trigger the endless loop since in the template {{counter}} needs to be rendered.

(What you see is caused by the broken evaluation, so you will see some funky behavior.)