title: ng-animate child element inside ng-repeat
body: <p>I am trying to animate a child element inside a ng-repeat.
  This is what I have now. I am using css to animate but if you know a different better method please tell.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div class="container slider" ng-controller="sliderCtrl"&gt;
          &lt;div ng-repeat="slide in slides" class="slide" ng-include="'/partials/slider/' + slide.image + '.html'"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>01.html (included inside ng-repeat)</p>
  
  <pre><code>&lt;div class="slider-message-1"&gt;
      &lt;span&gt;message&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;img class="slide-image" ng-src="assets/img/img00.jpg" /&gt;
  </code></pre>
  
  <p>sass file</p>
  
  <pre><code>.slide{
  
      &amp;.ng-hide{
  
          .slider-message-1{
              display: block!important;
              visibility: hidden;
          }
      }
  
      &amp;.ng-hide-remove {
  
          .slider-message-1{
              animation: fadeIn 2s;
              -webkit-animation: fadeIn 2s;
          }
      }
  
      &amp;.ng-hide-add {
  
          .slider-message-1{
              -webkit-animation: fadeOut 1s;
              animation: fadeOut 1s;
              visibility: visible;
          }
      }
  }
  </code></pre>