How to handle tree like structure in angularjs?

Question

I am trying to implement a hierarchical structure in the form of a tree in a complex angular.js web app. I am using nested ng-repeats to render the structure but I am getting significant performance related issues in IE 10 and minor performance issues in chrome. Data that will be used will contain as many as 5,000 entries at the final level. Based on my research I think following could be the reasons behind it:

1. Large number of watcher elements. To tackle this I have already implemented one time data binding and number of watchers is not that high.
2. Browser repaint time: ng-repeat adds the elements to the DOM one by one. This could result in overloading of browser engine to render complex HTML multiple number of times causing large amount of lags. To tackle this I have applied lazy loading sort of technique by rendering the child only when one node is collapsed. Still I am experiencing an observable delay in rendering of nodes where the number of nodes to be rendered is large.
3. CSS classes: I tried implementing the tree structure by stripping off all the classes from node elements. This resulted in significant improvement but removing classes is not really an option. Also if I give inline style to the elements then it also results in better performance.
4. Performance issues of Angular material: Angular material is the integral part of my web app. After looking into the issues submitted by angular material users for large amount of ng-repeats to which fixes have already been rolled out. But upgrading to latest version didn't help either.

Please refer to this image for the table design. Template used for the creation of tree is as follows:

<li ng-repeat="item in ::item.childLevelDetails" >
 <div >
    <a ng-click="toggle(this)" class="icon icon-stream-add-2">
      <span></span>
    </a>
    <div class="unitTextDiv">{{::item.title}}</div>
 </div>
 <ol ng-include= "'tree_node'">
</li>

Request you to suggest any possible solutions to this problem.

Answer 1

angular-ui-grid can be considered as one option. It uses virtualization and renders only the rows that are visible. So, it performs well with huge number of rows too. It comes with a great documentation and examples http://ui-grid.info/docs/#/tutorial

Refer to the grouping example to make sure that this helps for your use case http://ui-grid.info/docs/#/tutorial/209_grouping