title: How to add animation to `ng-repeat` with custom template
body: <p>In my <code>directive</code> I am using <code>ng-repeate</code> on custom <code>directive</code>. in the custom <code>directive</code> i am using <code>$compile</code> method as well.</p>
  
  <p>On load i need to add the animation. as well when user click the animation need to appear.</p>
  
  <p>In this case how to apply the <code>ngAnimation</code> to element. i tried using :</p>
  
  <pre><code> $animate.addClass(element.find('div'), 'show', function () {
          scope.$apply();
        });
  </code></pre>
  
  <p>But not works.</p>
  
  <p>Here is my full code of <code>directive</code>.</p>
  
  <pre><code>myApp.directive("newArray", function ($compile) {
  
    return {
  
      scope : {
        value : "=",
        index : "=",
        update:"&amp;"
      },
  
      link : function (scope, element, attrs) {
  
        var getTemplate = function (value, index) {
  
          switch(index) {
  
            case 0 :
              return '&lt;div ng-click="update()"&gt;I am here {{index}} {{value.name}}&lt;/div&gt;'
              break;
  
              case 1 :
              return $('&lt;div /&gt;', {
                class:'blue',
                html : "&lt;h1&gt;testing{{index}} {{value.name}}&lt;/h1&gt;",
                click : function () {
                  scope.update({num: scope.value.num});
                }
              });
              break;
  
              case 2 :
              return $('&lt;div /&gt;', {
                class:'green',
                html : "&lt;h1&gt;testing{{index}} {{value.name}}&lt;/h1&gt;",
                click : function () {
                  scope.update({num: scope.value.num});
                }
              });
              break;
  
          }
  
        }
  
        element.html(getTemplate(scope.value, scope.index));
        $compile(element.contents())(scope);
  
        $animate.addClass(element.find('div'), 'show', function () {
          scope.$apply();
        });
  
  
      }
  
    }
  
  })
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/gtQjhEbq5TjBzqaJZXdO?p=preview" rel="nofollow">Demo in Plunker</a></p>