title: watch on attribute change angular from directive controller
body: <p>I have a directive but I am facing problem in watching an attribute from the directive controller.</p>
  
  <pre><code>    angular.module('app',[])
  .directive('timer1', function () {
      return {
          template: '&lt;div class="timerCont1"&gt;&lt;div class="progressBar"&gt;&lt;/div&gt;&lt;/div&gt;',
          restrict: 'E',
          replace:true,
          scope: true,
          controller: function ($scope, $element, $attrs) {
              $scope.$watch($attrs.timerevent, function (value) {
                  switch ($attrs.timerevent)
                  {
                      case "start":
                          $scope.timeoutId = null;
                          $scope.countdown = Number($attrs.timer);
                          $scope.tick();
                          break;
                      case "stop":
                          $scope.stop();
                          break;
                      case "destroy":
                        alert()
                          $scope.stop();
                          $scope.$emit('destroy_pizza', {
  
                              });
  
                  }
  
              },true);
              $scope.tick = function () {
                  $scope.timeoutId = setTimeout(function () {
                      if ($scope.countdown &lt;= 0) {
                          $scope.$apply(function () {
                              $attrs.$set('timerevent', 'destroy')
                          });
                      }
                      else {
                          $scope.countdown--;
  
                          $scope.tick();
                      }
                      $scope.$apply();
                  }, $attrs.interval);
              };
  
             $scope.stop =  function () {
                     clearTimeout($scope.timeoutId);
                     $scope.timeoutId = null;
  
             };
  
          }
      };
  });  
  </code></pre>
  
  <p>And here goes my hTML </p>
  
  <pre><code>&lt;timer1 interval="1000" timerevent="start" timer="10"&gt;&lt;/timer1&gt;
  </code></pre>
  
  <p>When I am setting the attribute timerevent to "destroy" my watch is not getting called, whereas the attribute is updated successfully.</p>