javascript - Refer to scope variable in directive two way data binding -

i trying create reusable progress bar directive isolate scope. directive have public functions start, stop , reset progress bar. directive used within ng-repeat

here definition of directive:

chatapp.directive('jsprogress', function() {      var stopwatch = function(options, updatecallback) {           // var timer       = createtimer(),            var   offset, clock, interval;            // default options           options = options || {};           options.delay = options.delay || 1;             // initialize           reset();            function start() {             if (!interval) {               offset   = date.now();               interval = setinterval(update, options.delay);             }           }            function stop() {             if (interval) {               clearinterval(interval);               interval = null;             }           }            function reset() {             clock = 0;            // render(0);           }            function update() {             clock += delta();            // render();             updatecallback();           }            function delta() {             var = date.now(),                 d   = - offset;              offset = now;             return d;           }            // public api           this.start  = start;           this.stop   = stop;           this.reset  = reset;           this.update = update;         };        return {         restrict : 'ae',         replace : true,         scope: { api: '=', key: '@'},         template: '<div class="dot" ng-attr-id="dots"><ul id="{{key}}" data-currentstate="2"><li class="dot-red"></li><li></li><li></li><li></li></ul></div>',         link : function($scope, elem, attr) {              var timer = new stopwatch( {delay: 5000}, updatecallback);             timer.start();             function updatecallback()             {                 var currentcount;                 currentcount = $(elem).find('#' + $scope.key).attr('data-currentstate');                 currentcount++;                 $(elem).find('#' + $scope.key).attr('data-currentstate',currentcount);                 $(elem).find('#' + $scope.key+' li:nth-child(' + currentcount + ')').addclass('dot-red');              }              $scope.api =              {                     reset: function()                     {                         timer.reset();                     },                      start: function()                     {                          timer.start();                     },                      stop: function()                     {                         timer.stop();                     }                 };          }     }; }); 

this how used within ng-repeat

<js-progress api="{{activeuserid}}" key="{{activeuserid}}_{{activecompanyid}}" />

now want particular instance of directive within ng-repeat , call public api start, stop , reset particular progress bar. how can same? in above definition, doesn't allow me use variable {{activeuserid}} because want refer each instance individually in ng-repeat.

you overwriting activeuserid being passed ctrl directive @ at line:

$scope.api = {}; 

i believe should keep track of api objects in controller in way:

in controller

$scope.bars = [     {         activeuserid: "id",         activecompanyid: "companyid",         api: {} //this allows angularjs reuse object instance     },     {         activeuserid: "id2",         activecompanyid: "companyid2",         api: {} //this allows angularjs reuse object instance     }, ]; 

the html template controller

<div ng-repeat="b in bars">     <js-progress api="b.api" your-extra-params-here /> </div> 

later on in controller, able do:

$scope.bars[0].api.start();