AngularJS: CSS Animation On Click (ngClick)
<p>I've seen several questions related to CSS animations 'on click' in Angular when researching this, but generally without any solid or definitive answers.</p>

<p>I want to know the best practice way to achieve a CSS animation when clicking on an element in an AngularJS environment (1.x). Specifically, lets say we want to utilize an animation from <a href="https://daneden.github.io/animate.css/" rel="nofollow">Animate.CSS</a> and each time we click on the element in question this animation should happen.</p>

<p>Here is the route I have taken currently, but wonder if there might be a better way:</p>

<p>Markup:</p>

<pre><code>&lt;div class="play" ng-click="animate($event)"&gt;&lt;/div&gt;
</code></pre>

<p>js function (in controller):</p>

<pre><code>$scope.animate = function(event) {
    var el = event.srcElement;
    angular.element(el).addClass('animate');
    $timeout(function() {
        angular.element(el).removeClass('animate');
    }, 1000);
};
</code></pre>

<p>CSS:</p>

<pre><code>.play.animate {
  animation:0.5s bounceIn ease;
}
</code></pre>

<p>I don't particularly love the use of timeout here to remove the class after the animation should be complete. Is ngClick even the answer here, or should I be using a totally custom directive?</p>