title: AngularJS animate element on scope change
body: <p>I am new to AngularJS and at the moment I'm trying out AngularJS animations.</p>
  
  <p>I wrote a CSS animation class that I would like to apply to a Twitter Bootstrap badge on the "Message" button when the value on the badge changes.</p>
  
  <p>The unread message count is handled by the "MessagesCtrl" controller.</p>
  
  <p>For now, the count changes on a button click ("Add Message").</p>
  
  <p>Here is the complete application that I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="ExampleApp"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-animate.min.js&gt;&lt;/script&gt;
      &lt;style rel="stylesheet"&gt;
          @-webkit-keyframes shake {
              0% { -webkit-transform: translate(2px, 2px) rotate(20deg); }
              20% { -webkit-transform: translate(-4px, -4px) rotate(-20deg); }
              40% { -webkit-transform: translate(2px, 2px) rotate(20deg); }
              60% { -webkit-transform: translate(-2px, 2px) rotate(-20deg); }
              80% { -webkit-transform: translate(4px, -4px) rotate(20deg); }
              100% { -webkit-transform: translate(-2px, 2px) rotate(-20deg); }
          }
  
          .shake {
              -webkit-animation-name: shake;
              -webkit-animation-duration: 0.6s;
              -webkit-transform-origin: 50% 50%;
              -webkit-animation-iteration-count: 1;
              -webkit-animation-timing-function: linear;
          }
      &lt;/style&gt;
      &lt;script&gt;
          var app = angular.module("ExampleApp", ['ngAnimate']);
          app.controller("MessagesCtrl", ['$scope', function ($scope) {
              $scope.count = 0;
  
              $scope.addMessage = function () {
                  $scope.count++;
              };
          }]);
  
          app.directive('shake', ['$animate', 'MessagesCtrl', function ($animate) {
              return {
                  scope: {
                      count: '='
                  },
                  link: function(scope, element, attrs) {
                      scope.$watch(attrs, function() {
                          $animate.addClass(element, 'shake').then(function() {
                              element.removeClass('shake');
                          });
                      });
                  }
              };
          }]);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MessagesCtrl"&gt;
      &lt;button class="btn btn-primary" type="button"&gt;
          Messages &lt;span shake id="badgeMessage" class="badge" ng-if="count &gt; 0"&gt;{{ count }}&lt;/span&gt;
      &lt;/button&gt;
      &lt;button ng-click="addMessage()"&gt;Add Message&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When you click the "Add Message" button, the unread count changes, but the shake animation isn't applied on the badge. Can anyone see why this isn't happening? I think the problem is that I'm
  not including the $scope of the controller into the directive, but I'm not sure how to do this.</p>
  
  <p>The animation is called inside the "shake" attribute directive.</p>
  
  <p>Thank you for your time and assistance.</p>