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() { ... }, true);

How it works…

The AngularJS expression contained within {{ }} in the template will be the exact entry registered in the watch list. Any method or logic within that expression will necessarily be evaluated for its return value...