Animating using animate CSS and ng directive in Angular js is not working

Question

I am developing a Website using Angular JS. I want to beautify my website adding animation. I am using Animate css because it has rich built-in animation features. According to this link, I assumed that animate CSS can easily be used with angular js to animate using ng directive.

So I downloaded animate CSS and included in my project. My project has ng animate as well. First I animated only using animate CSS like below.

<h1 class="banner-title animated bounce">&lt;Tech Blog /&gt;</h1>

It is beautifully animating the element, and it is working. But I want to animate binding with ng directive like in this link. Now I am binding with ng-repeat directive like below.

This is my html

<div class="subject-widget" ng-repeat="item in items">
   <h1>{{ item.Title }}</h1>
</div>

I am animating them when they enter.

This is my css

.subject-widget.ng-enter{
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}

But the above code is not working. It is not animating the elements when they enter.