Multiple appearance of "recalculate style" causes slow loading


I have a page with about 150 rows.
Each row currently has only 1 watcher.
However, I do use one time binding a lot in every row.
I noticed that the loading time is very slow, especially on mobile, and there is one main reason for it -
I attached below a screenshot of chrome’s dev timeline tool.
What you see goes on and on for hundreds of times (recalculate, cancel, recalculate, cancel,…), and it takes most of the loading time.
I noticed that if I remove some ng-if’s and ng-classes it improves, but I’m still not sure why it happens and how to completely fix it.
Can you please advise and help minimize the loading time?

Thank you



Can you provide a working example?


I’m the OP, switched users.

I can’t provide a working example since my app is quite complicated, but I can explain what I’m doing and point to a possible bottleneck:

  1. I have an HTML page with ng-repeat on a list which is will be filled when a promise will return.
  2. I have a loading spinner that waits for the promise to return. When it does, I fill the list and let ng-repeat draws it.
  3. The ng-repeat is showing a directive I wrote myself, and is wrapped by ng-controller. The controller does some calculations and then changes the design of the directive (the HTML of the directive is using on time binding to the $scope of that controller to determine its design.

I think that if I’ll make sure the list is ready BEFORE the HTML page is loaded, it might save some time and will prevent a repetition what I’ve shown above.
What do you think?
Does this info help?
Thank you