Angular scope function executed multiple times

I have defined a function on scope. And when I call it from the view inside {{}} it executes X number of times.

Controller

function testCtrl($scope) {
   $scope.myFunc = function(name) {
       return "Hello " + name;
   }
}

HTML

<div>{{myFunc('Joe')}}</div>

You can see it in this example: http://jsfiddle.net/rbRvD/2/

Or with Plunker: http://plnkr.co/edit/LLQ7cKs2fEoBwv0C5XPE

I guess this is done the wrong way, but why is it executed so many times?

Solution 1:

Your function is run 10 times. Why 10? Why not 100?

The answer is in the docs:

The watch listener may change the model, which may trigger other listeners to fire. This is achieved by rerunning the watchers until no changes are detected. The rerun iteration limit is 10 to prevent an infinite loop deadlock.

When you see this happening, it means you are changing the model in such a way that Angular has to rerun the digest and fire the watches again. In your particular case you are calling a function that updates a counter, which is displayed on the page. When the counter value changes it runs the digest again, which calls the function that updates the counter, etc, etc.

Angular expects you (and indeed encourages you) to change the model and let the view respond to those changes, rather than the other way around.

Solution 2:

This is expected behaviour. Angular expressions ({{expression}}) are re-evaluated on each $digest loop (sometimes multiple times per loop). This means that expressions should stay light in computational terms.

For that matter, expression evaluation should not result in an AJAX call or some other intensive or asynchronous operation, or if it has to, than you should be caching the results.