Upon placing a breakpoint on a bound function, I discovered that it is being triggered every cycle. This came as a surprise to me as the timer displaying a countdown on the page was updating other properties as well.
The demonstration below showcases three instances of two controllers. Strangely, the first two dates get updated each time the $timer is executed, even though the second date belongs to a different scope.
To prevent the date from being constantly updated, I added a double colon (::) before the binding in the third date section. However, this solution does not scale effectively. How can I ensure only the timer element updates without affecting other bindings?
View Demo
http://plnkr.co/edit/1IhAabzBXMVl9LEfaf8M?p=preview
JavaScript Code
var app = angular.module('myApp', [])
.controller('MainCtrl', ['$timeout', function($timeout) {
var vm = this;
vm.countDownLeft = 99999;
vm.myFunction = function() { return new Date(); }
function countdown() {
vm.countDownLeft--;
$timeout(countdown, 1000);
}
countdown();
}]).controller('SecondCtrl', function() {
var vm = this;
vm.myFunction = function() { return new Date(); }
});
HTML Markup
<div ng-controller="MainCtrl as vm">
<p>Counter: {{vm.countDownLeft}}</p>
<p>Updates: {{ vm.myFunction() }}</p>
</div>
<div ng-controller="SecondCtrl as vm2">
<p>Updates: {{ vm2.myFunction() }}</p>
</div>
<div ng-controller="SecondCtrl as vm3">
<p>Doesn't update: {{ ::vm3.myFunction() }}</p>
</div>