Angular JS ng-repeat consumes more browser memory

Question

I have the following code

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

users is an array of user objects with only id and name. number of user objects in array - 150

items is an array of item objects with only id and rating. number of item objects in array - 150

When i render this in browser, it takes about 250MB of heap memory when i tried profiling in my chrome - v23.0.1271.95.

I am using AngularJS v1.0.3.

Is there an issue with angular or am i doing anything wrong here?

Here is the JS fiddle

http://jsfiddle.net/JSWorld/WqSGR/5/

Answer 1

Well it's not the ng-repeat per se. I think it's the fact that you are adding bindings with the {{item.rating}}.

All those bindings register watches on the scope so:

• 150 * 2 = 300(for the 2 user infos)
• 150 * 150 = 22500(for the rating info)
• Total of 22800 watch functions + 22800 dom elements.

That would push the memory to a conceivable value of 250MB

From Databinding in angularjs

You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway.