ng-repeat中的AngularJS指令范围绑定问题

Question

am having a directive which is a stopwatch. It is placed under ng-repeat so the user can create as many stopwatches he needs. All these stopwatch has their own play/pause and stop button. The issue am facing is when the user starts the first stopwatch all the other watches starts running, but when starting from the last watch it works fine. What am I doing wrong here. Find the plunker

my link function: Complete working code is in plunker

  link: function(scope, element, attrs, ctrl) {

  var start_button = angular.element(document.querySelector('.play'));
  var pause_button = angular.element(document.querySelector('.pause'));
  var stop_button = angular.element(document.querySelector('.stop'));

  start_button.on('click', ctrl.start);
  pause_button.on('click', ctrl.pause);
  stop_button.on('click', ctrl.stop);
  scope.$on('$destroy', function () {
    start_button.off('click', ctrl.start);
    pause_button.off('click', ctrl.pause);
    stop_button.off('click', ctrl.stop);
  });

},

Answer 1

I see that in your directive template you have an ng-click so this code can be removed

 var start_button = angular.element(document.querySelector('.play'));
  var pause_button = angular.element(document.querySelector('.pause'));
  var stop_button = angular.element(document.querySelector('.stop'));

  start_button.on('click', ctrl.start);
  pause_button.on('click', ctrl.pause);
  stop_button.on('click', ctrl.stop);
  scope.$on('$destroy', function () {
    start_button.off('click', ctrl.start);
    pause_button.off('click', ctrl.pause);
    stop_button.off('click', ctrl.stop);
  });

and then it works :)

working plunkr