Imagine that this is a big conference, and one day has 30 sessions. How many $watch are there? There are five per session, plus one for the ng-repeat. That makes 151 $watch. What’s the problem with this? Every time the user “likes” a session, Angular is going to check if the name of the session has changed (and will do the same with the other bindings as well).

The problem is that all of our data, with the exception of the likes, are static. Isn’t that a waste of resources? We are 100% sure that our data are not going to change, so, why should Angular check if they have changed?

The solution is simple. We unbind every $watch that is never going to detect a change. These $watch are important during the first run, in which our DOM is updated with the static information, but after that, they are watching a constant for changes, which is a clear waste of resources.

You convinced me! How can we approach this? Luckily for us, there is a guy who asked himself this question before us and created a set of directives that does the job for us: Bindonce.

Bindonce

Bindonce is a set of directives meant for bindings that are not going to change while the user is on a page. That sounds like a perfect match for our application.

For this to work we need to import bindonce into our app (and load the library after Angular):

app.js

1

app=angular.module('app',['pasvaz.bindonce']);

We changed our interpolations ({{ ... }}) to bo-text. This directive binds our model and waits until the DOM is updated to unbind the $watch. This way, the data will be on screen but without any $watch.

To make this happen, we need to set the bindonce directive in the parent, so it will know when the data is ready (in this case, the session) so the children directives like bo-text will know when they can actually unbind the $watch.

The result of this is one $watch per session instead of five. That makes 31 $watch instead of 151. That means that with a proper use of bindonce we can potentially reduce the number of watches in our application.

Conclusion

While premature optimization should be avoided, this library could help an application that is suffering from a performance bottleneck.

There are a lot more directives in bindonce, so I encourage you to check them out! List of directives