title: Ng-animate does not add the ng-enter and ng-leave classes
body: <p>This is my first project working with Angular and i have some troubles with ng-animate. I did a couple of tutorials and in the tutorials i got everything working fine. Now i'm using Angular for a project and i just can't get ng-animate to work properly. The classes such as "ng-enter" and "ng-leave" are not added to the different elements. </p>
  
  <p>I've compared all kinds of working scripts with mine but just can't find out what i am doing wrong. </p>
  
  <p>My header:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/app.css"&gt;
  
  &lt;script src="js/libraries/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/libraries/angular.js"&gt;&lt;/script&gt;
  &lt;script src="js/libraries/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="js/libraries/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script src="js/libraries/angular-route.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/services.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="view-container"&gt;
  &lt;div ng-view class="{{pageclass}} view-frame"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My app.js</p>
  
  <pre><code>'use strict';
  
  /* App Module */
  
  var engineShowcaseApp = angular.module('engineShowcaseApp', [
    'ngRoute',
    'ngAnimate',
    'engineShowcaseController',
    'engineShowcaseServices'
  ]);
  
  engineShowcaseApp.config(['$routeProvider',
    function ($routeProvider) {
      $routeProvider.
        when('/', {
          templateUrl: 'partials/main.html',
          controller: 'MainCtrl'
        }).
        when('/chapters/:chapterID', {
          templateUrl: 'partials/chapter.html',
          controller: 'ChapterCtrl'
        });
    } ]);
  </code></pre>
  
  <p>My controllers.js:</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  var engineShowcaseController = angular.module('engineShowcaseController', []);
  
  engineShowcaseController.controller('MainCtrl', function ($scope, Main) {
      $scope.pageclass = "page-home";
      $scope.hotspots = Main.query();
  });
  
  
    engineShowcaseController.controller('ChapterCtrl', function ($scope, $routeParams, Main) {
      $scope.pageclass = "page-chapter";
        $scope.chapter = Main.get({ chapterID: $routeParams.chapterID });
    });
  </code></pre>
  
  <p>The HTML of the first/main pagina:</p>
  
  <pre><code>&lt;div 
      ng-repeat="hotspot in hotspots" 
      class="hotspot hotspot-{{hotspot.id}}" 
      data-nextup="chapter-{{hotspot.id}}" 
      data-startframe="{{hotspot.startFrame}}" 
      data-endframe="{{hotspot.endFrame}}"&gt;
  
      &lt;a  href="#/chapters/{{hotspot.chapterID}}"&gt;
          {{hotspot.label}}
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If i'm correct the div's with the class 'hotspot' should receive the 'ng-enter' and 'ng-leave' classes... but somehow they don't. </p>
  
  <p>Could anyone help me out with this? What am i doing wrong?
  Many thanks!!</p>