create animation in angular js after data changes - angularjs

Question

I have created a slider which slides 3 data at one time. But i want to add some animation like that of real slide. How do i do in angular js? I have code like below
moverightRecArts changes the startIndexArt and endIndexArt values from controller.
<div class="col-md-12">
<div class="col-md-4" ng-repeat="a in abc.slice(startIndexArt, endIndexArt)" >
<div class="col-md-12">
<div class="col-md-3">
<img ng-src="{{a.url}}">
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<h3>{{a.sub}}</h3>
</div>
<div class="col-md-12">
<p>{{a.bod}}</p>
</div>
</div>
</div>
</div>
<div class='col-move-next-Art'>
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right" ng-click="moverightRecArts()"></span>
</div>

Answer 1

Pleas check https://daneden.github.io/animate.css/
Dynamic Animation
You have to call animation function like
<ion-view class="myAnimation">
<ion-content>
....
</ion-content>
</ion-view>
and add class when page is loaded
$('#myAnimation').addClass('animated shake');
and after animation finish you have to remove class which is added to div so again animation works without refresh page. for that you have to do that
$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);
function removeClass()
{
$('#myAnimation').removeClass('animated shake');
}
This way is dynamic but you can also set as static in html like
Static
<ion-view class="animated shake">
<ion-content>
....
</ion-content>
</ion-view>