title: Using AngularJS' ngAnimate when removing an item from scope
body: <p>Very simple question: In <code>AngularJS 1.2.x</code>, is it possible (and how) to get <code>ngAnimate</code> to fire when removing an item from scope?</p>
  
  <p>Here's an example Plunker:</p>
  
  <p><a href="http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview" rel="noreferrer">http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview</a></p>
  
  <p>Code:</p>
  
  <pre><code>  &lt;body ng-controller="MainCtrl"&gt;  
        &lt;div ng-repeat="img in imgs" class="my-repeat-animation"&gt;
          &lt;img ng-src="{{img}}" /&gt;
          &lt;button class="btn btn-primary" ng-click="remove(img)"&gt;DELETE&lt;/button&gt;
        &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
       $scope.imgs = ['http://cache.mrporter.com/images/products/362812/362812_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/362807/362807_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/364762/364762_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/357020/357020_mrp_in_l.jpg']
       $scope.remove = function(image){
         var index = $scope.imgs.indexOf(image);
         $scope.imgs.splice(index,1);
       }
  });
  </code></pre>
  
  <p>As you can see, clicking the "DELETE" button runs <code>splice()</code> on <code>$scope.imgs</code>. I'd like to animate this, rather than have it simply disappear. I'm using the transitions just copy-and-pasted from <a href="http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngrepeat" rel="noreferrer">this Year Of Moo article</a> which works just fine when filtering the scope, but evidently not when removing from scope.</p>