javascript - AngularJS : Isolate the scope of a single directive to avoid updating in other part of application -

sorry confused title couldn't specify better in short text, try more explicit in description.

i created web application angularjs. 1 of requirements in part of page (in directive) page needs have 3 different doms number going updated (generally 150 times per seconds each of them).

first solution adopted (i show directive's controller):

angular.module('mymodule')     .controller('mycontroller', function($scope, $interval) {         $scope.items = [{             name: 'item 1',             speed: 100         },{             name: 'item 2',             speed: 150         },{             name: 'item 3',             speed: 300         }];          angular.foreach($scope.items, function (item) {             item.count = 1;             $interval(function increment () {                 item.count++;             }, item.speed);         });     }); 

and of course in template:

<ul>     <li ng-repeat="item in items">         {{item.count}}     </li> </ul> 

it works fine, creates problem whole page application has several angular directives ng-show/ng-hide/ng-if/ng-bind/ng-class , others calls functions , functions called lot of times double binding of angularjs.

the reported controller in directive updates scope , angular check every time evaluate functions related ng-. every single ng- function called pretty 550 times per second. scenario problem application has run on smartphone , solution consume lot of battery (for it's execute lot of useless js functions).

i had solution update number using pure js , dom references, i'd keep whole js code in angularjs.

can please suggest way in angularjs? maybe way isolate scope?

cheers.