title: Angular ng-class performance issue when too many elements in DOM
body: <p>I have been working on a complex angular page which has been causing performance issue. To highlight the problem I have created a fiddle <a href="http://jsfiddle.net/4ex2xgL1/3/">http://jsfiddle.net/4ex2xgL1/3/</a> here.</p>
  
  <p>Essentially the performance issue is being caused by ng-class statement which has a function in it. </p>
  
  <pre><code>&lt;span class="done-{{todo.done}}" ng-class="myfunction()"&gt;{{todo.text}}&lt;/span&gt;
  </code></pre>
  
  <p>The span is in an ng-repeat. On running the fiddle one can see that ng-class gets executed several times when the page loads and on each key up it gets called as many time as number of items in the TODO list.</p>
  
  <p>This is a lot simpler case, in my case I have 780 items on my page and the function ends up being evaluated aroung 3000 times!</p>
  
  <p>One of the solution we saw is to break up the scope but it will cause almost a rewrite of my app. </p>
  
  <p>We also tried <a href="https://github.com/Pasvaz/bindonce">https://github.com/Pasvaz/bindonce</a> but it doesn't seem to be working with highly dynamic content. </p>
  
  <p>Any thoughts?</p>