How to reduce calls to Angular $digest-cycle

Question

Problem

While the $digest -cycle in my app still runs quite fast, i noticed that some callbacks (which are bound in the templates for example via ng-if ) are called way more often than i expected. This goes up to 100+ calls on a single UI-interaction (where I would generally expect something between 3 or 10 calls at most).

I would like to understand why the callbacks are called this often and possibly reduce the number of calls to prevent future performance Issues.

What I tried

From my understanding the described behaviour means that the $digest -cycle takes up to a few-hundred loops to remove all dirty-flags and make sure that all rendered nodes are up-to-date.

I simplified several callbacks to just return true - instead of evaluating some model-values - which had no effect on the number of $digest calls at all. I also checked the Performance-Tab in the Chrome-developer-Tools which only told me that the calls themselves are executed within a few ms.

For trouble-shooting i also removed several ng-repeat blocks and angular-filters throughout the application since those obviously apply several watches to be evaluated in the $digest loop. This had no impact on the number of calls to the callback-functions either.

Thus i guess i need a more sophisticated tool or method to debug the (number of) $digest calls throughout my application to even figure out where all those calls are coming from and how to reduce them.

Questions

Which tools and methods can I use to evaluate the performance of the $digest-loop (and especially the number of loops) in my angular-application?

How do I reduce the number of calls to callbacks which are bound in a template?

I think to answer the second question it would already be helpful to understand what can cause additional calls to foo() in a setup like this:

<div ng-if="ctrl.foo()">
    <!--<span>content</span> -->
</div>

Answer 1

First thing what does actually digest cycle in angularJS?

1. Its process in which angular framework check for all two way binding variable changes by its own continuously.

2. When ever user interact and change two way binding variable then it get fire.

3. programmatically(in controller, service or factory) two way binding variable get changed

Above are reasons to fire digest cycle call...

Which entity are part of digest cycle?

1. $watch added on variables.

2. ngModel, ng-model iteself internally add $watch on varaible

Basically $watch function.

What we can do to avoid $digest/avoid call to $watch?

1. Think about variable using in UI that does this variable need to be two way binding? If answer is NO then just go for one-way bind syntax

2. Avoid use of watch function from controller, service, factory Then how can I watch it...

   1. RX js is right now best library which can help to overcome this issue. Its just one option.

   2. Use getter setter

      How?

 mymodule.controlle('ctrName', ctrClass); ctrClass { constructor($scope) { this.myVar1 = null; this.myVar2 = null; } set myVar1(value) { // either code which i want in watcher // or // Some function which i want to execute after value get set this.afterSet(); return this.myVar1 = value; } afterSet() { } } 

3. Use controllerAs feature of angular

4. Create directives with isolated scopes

About tool:

To validate angular application Batarange is good tool.