angularjs - ng-repeat elements are removed from the DOM after a moment rather than immediately -

i have instagram feed page shows liked media specific user, results limited 6:

 <li ng-repeat="p in pics | limitto: 6">    <a href="{{p.link}}" target="_blank">      <img ng-src="{{p.images.standard_resolution.url}}" />    </a>  </li>  <button ng-click="shuffle()">shuffle</button> 

i added shuffle button when click picks 6 pictures @ random total amount of pictures in json. when click shows them second. there way stop happening?

js

app.controller('showimages', function($scope, instagramapi){     $scope.layout = 'grid';     $scope.data = {};     $scope.pics = [];     $scope.shuffle = function() {         $scope.pics.sort(function() { return 0.5 - math.random() });     };     instagramapi.fetchphotos(function(data){         $scope.pics = data;         console.log("length "+data.length)     }); }); 

you can see here:

http://alexanderlloyd.info/angular-instafeed-master/

this behavior expected because elements styled .ng-leave fade out when leaving dom. need remove style elements altogether, or if needed, conditionally apply/remove transition not affecting elements in state you're dealing with.

this style problem:

.page .ng-leave {   -webkit-animation: fadeout 0.6s both ease-in;   -moz-animation: fadeout 0.6s both ease-in;   animation: fadeout 0.6s both ease-in; } 

any element inside of .page gets class .ng-leave going animated out. perhaps meant .page.ng-leave apply .page? removed style , tried shuffle , leaving elements removed desire.