Ways to improve AngularJS performance even with large number of DOM elements -

i'm evaluating whether or not use angularjs web project, , i'm worried performance feature need implement. know if there's better way implement functionality i'm trying in angularjs.

essentially, seems me time takes angularjs react event dependent on number of dom elements in page, when dom elements aren't being actively changed, etc. i'm guessing because $digest function traversing entire dom.. @ least experiments, seems case.

here's play scenario (this isn't i'm trying do, close enough testing purposes).

i have angularjs highlight word hover on it. however, number of words in page increases, there's larger delay between when hover on word , when highlighted.

the jsfiddle shows this: http://jsfiddle.net/czerwin/5qfzg/4/

(credit: code based on post peter bacon darwin on angularjs forum).

here's html:

<div ng-app="myapp">     <div ng-controller="controllera">         <div >             <span ng-repeat="i in list" id="{{i}}" ng-mouseover='onmouseover(i)'>                 {{i}},              </span>             <span ng-repeat="i in listb">                 {{i}},              </span>         </div>     </div> </div> 

here's javascript:

angular.module('myapp', []) .controller('controllera', function($scope) {     var i;     $scope.list = [];     (i = 0; < 500; i++) {         $scope.list.push(i);     }      $scope.listb = [];     (i = 500; < 10000; i++) {         $scope.listb.push(i);     }      $scope.highlighteditem = 0;     $scope.onmouseover = function(i) {         $scope.highlighteditem = i;     };      $scope.$watch('highlighteditem', function(n, o) {         $("#" + o).removeclass("highlight");         $("#" + n).addclass("highlight");     }); }); 

things note: - yes, i'm using jquery dom manipulation. went route because way register 1 watcher. if purely in angularjs, have register mouseover handler each span, , seemed make page slow well. - implemented approach in pure jquery well, , performance fine. don't believe it's jquery calls slowing me down here. - made first 500 words have id's , classes verify it's having more dom elements seems slow them down (instead of dom elements affected operation).

i think best way solve performance issues avoid using high level abstractions (angularjs ng-repeat corresponding background magic) in such situations. angularjs not silver bullet , it's working low level libraries. if such functionality in text block, can create directive, container text , incapsulate low level logic. example custom directive, uses letteringjs jquery plugin:

angular.module('myapp', [])   .directive('highlightzone', function () {     return {       restrict: 'c',       transclude: true,       template: '<div ng-transclude></div>',       link: function (scope, element) {         $(element).lettering('words')       }     }   }) 

http://jsfiddle.net/j6dkw/1/