angularjs - ディレクティブでスコープが 2 回目に変更されたときに発火しないことを確認する

Question

scope.isAnimatingディレクティブでスプライトをアニメーション化しており、監視されているスコープ変数があります。スプライトをクリックすると値が反転し、アニメーションが停止/開始します。ウォッチは、要素が最初にクリックされて値が変更されたときに起動しますが、2 回目は起動しません。

これは完全なディレクティブではなく、省略版です。これをライブで見たい場合は、スプライトをクリックして停止し、もう一度クリックして開始します (動作しません)。

app.directive('sticker', function(timeFunctions){
return {
  restrict: 'AE',
  replace: true,

scope: {
  isAnimated: '=isanimated',
  Animation: '=animation',
  speed: '=speed'
},

 template: '<div></div>',
 link: function(scope, element, attrs) {

  scope.$watch('isAnimated', function(isAnimated) {
     // fires on the first click but not the second, breakpoint not hit
      if (scope.isAnimated) {
          startAnimation();
      } else {
         timeFunctions.$clearInterval( scope.animateTimeout );
      }
  });

   element.bind('click', function(e) {
      e.preventDefault();
      scope.isAnimated = !scope.isAnimated;
   });


  }
}
});

両方のクリックで時計を機能させるにはどうすればよいですか?