AngularJS Web application development Cookbook

Optimizing template-binding watch expressions

Any AngularJS template expression inside double braces ({{ }}) will register an equality watcher using the enclosed AngularJS expression upon compilation.

How to do it…

Curly braces are easily recognized as the AngularJS syntax for template data binding. The following is an example:

<div ng-show="{{myFunc()}}">
  {{ myObj }}
</div>

On a high level, even to a beginner level AngularJS developer, this is painfully obvious.

Interpolating the two preceding expressions into the view implicitly creates two watchers for each of these expressions. The corresponding watchers will be approximately equivalent to the following:

$scope.$watch('myFunc()', function() { ... }, true); $scope.$watch('myObj', function() { ... ...