AngularJS Outer ng-repeat not to register watches on inner ng-repeat

Question

This is in relation with my question - Angular JS ng-repeat consumes more browser memory

My problem here is I need nested ng-repeats and the nested ng-repeats consumes more memory because of more watches being registered.

<table>
  <thead><td>Id</td><td>Name</td><td>Ratings</td></thead>
  <tbody>
   <tr ng-repeat="user in users | orderBy:'name' | limitTo:display_limit">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td><div ng-repeat="item in items | orderBy:'rating' | limitTo:inner_display_limit">{{item.rating}}</div></td>
   </tr>
  </tbody>
</table>

Here in my case, the number of objects that outer ng-repeat and inner ng-repeat operates on can go upto 1000. And as @Liviu pointed in the answer,each of the outer ng-repeat registers watch on the inner ng-repeat and that leads to consumable amount of memory being used. Is there a way we can avoid the outer ng-repeat from registering watches on inner ones by writing our own custom directive?

My case is in both inner and outer ng-repeats, I display the initial 50 items and on scroll, if the scroll reaches the end of the corresponding DOM, I update the limit by 50, so that the next 50 items gets displayed.

Any help is much appreciated!

Unparliamentary

Answer 1

You could write a directive that takes both users and items as bindings attributes (especially because it seems like your inner loop is independant from the outer one), then manually nest two loops that would add content to the DOM, plus adding a scroll listener to each element. It's more hard-way coding but a lot less watchers.

Rhodos