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

我有一个指示是秒表。它被放置在ng repeat下，因此用户可以根据需要创建任意多个秒表。所有这些秒表都有自己的播放/暂停和停止按钮。 我面临的问题是，当用户启动第一块秒表时，所有其他手表都开始运行，但从最后一块手表启动时，它工作正常。我做错了什么

我的链接功能：完整的工作代码在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);
  });

},

---

我看到，在指令模板中，您有一个ng单击，因此可以删除此代码

 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);
  });

然后它就起作用了：）