angularjs - Angular - Jquery Sprite switch animation stops working when using ng-view -

i have sprite animation switches next sprite animation after animation has finished playing.

i made switch using jquery, have been implementing angular's routing of jquery has stopped working.

i looked , found might wrong order of scripts in html, when tried moving jquery above angularjs script did not solve issue.

i looked further , found need change jquery angularjs directive. how go doing that??

every site has tried explaining how done, shows before , after code. not make sense me. can show me how done?

//this original jquery code using. want make work using directive    // $(document).ready(function(){  //     $(".hero-unit.land-animation").one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function(){   //        $(this).addclass("land-animation2");  //    });  // });          // attempted @ trying in angular.    var app = angular.module('app', ['ui.boostrap', 'ngroute']);    app.directive('directivename', function() {    return {      restrict: 'a',      link: function(scope, element, attrs) {        $(element).        'pluginactivationfunction' (scope.$eval(attrs.directivename));      }    };  });

/* scss */    @mixin animation($str) {    -webkit-animation: #{$str};    -moz-animation: #{$str};    /* -ms- prefix removed! */    -o-animation: #{$str};    animation: #{$str};        }    .land-animation {      width: 700px;      height: 493px;      background: url('../images/front-animation.jpg') left center;      animation-delay: 0.1s;      z-index: 10;      @include animation(play 4.0s steps(48));    }    @include keyframes(play) {      100% { background-position: -33600px; }  }      .land-animation2 {      width: 700px;      height: 493px;      background: url('../images/front-animation2.jpg') left center;      @include animation(play2 4.0s steps(48) infinite);      z-index: 10;  }    @include keyframes(play2) {      100% { background-position: -33600px; }  }    .hero-unit {      margin: 70px auto;      display: inline-block;      position: relative;        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>    <!--animation -->  <div class="col-sm-12 col-md-4 col-lg-7">    <div class="directivename hero-unit land-animation hidden-md hidden-sm hidden-xs"></div>  </div>