title: AngularJS ng-class add/remove animation do not apply/fire
body: <p>I'm trying to add an animation on add/remove on the <code>&lt;a&gt;</code>-Tag, based on the <code>toggleBookmark</code> function. The active class is added when it returns true and works fine.
  However, the <code>ng-add</code> or <code>icon__bookmark-add</code> animation does not fire on the <code>&lt;a&gt;</code> tag.</p>
  
  <p>Why? What am I doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li ng-repeat="event in events | filter:searchText"&gt;
    &lt;div ng-click="toggleBookmark(event.id)" class="events-list__icons"&gt;
      &lt;a ng-class="{active:isBookmarked(event.id)}" class="icon__bookmark"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.isBookmarked = (id) -&gt;
    BookmarkService.isBookmarked(id) // this just returns true or false
  
  $scope.toggleBookmark = (id) -&gt;
    BookmarkService.toggleBookmark(id) // returns nothing
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.icon__bookmark.ng-add,
  .icon__bookmark.ng-add-active,
  .icon__bookmark-add,
  .icon__bookmark-add-active {
    animation: flip .6s ease-in-out;
    backface-visibility: visible;
  }
  </code></pre>