Why is ngAnimate not working on div?

So, in my webapp, I have a list consisting of <div>

. I want to add some nice animation to them. So I got started and added ngAnimate

to my app.js file. I also added ng-animate="'animate'"

in <div>

. Then I reloaded my webapp and lo, it doesn't work. No animation at all. I am using ngAnimate and AngularJS version 1.2.4

I added below code:

<div class="col-use-list sidebar">
    <div class="col-md-12 sidebar-element" 
         ng-animate="'animate'" 
         ng-repeat="song in songs | orderBy:[filter]:reverse" 
         style="margin-bottom: 10px;"> 

        <div class="col-use-artwork" 
             style="padding-left: 0px;">
            <img alt="{{ song.name }}" 
                 src="img/artwork/{{ song.image }}.png" 
                 class="sidebar-song-image">            
        </div>

        <div class="col-use-name">      
            <p>{{ song.name }}</p>            
        </div>

        <div class="col-use-select">        
            <input type="radio" 
                   name="checkbox"  
                   ng-value="song.image" 
                   id="{{ song.image }}" 
                   class="sidebar-checkbox" />
            <label for="{{ song.image }}" class="sidebar-checkbox-label"></label>            
        </div>            
    </div>

    <div style='clear:both;height: 0;'></div>
</div>

      

        
        
        
      

    

app.js

var SongApp = angular
    .module('SongApp', 
        [
          "ui.router", 
          "ngUpload", 
          "pascalprecht.translate", 
          "ngAnimate"
        ]);

      

        
        
        
      

    

CSS

.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    height: 0px;
    opacity: 0;
}

.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    height: 30px;
    opacity: 1;
}