angularjs - How can I rewrite the jQuery plugin on Angular -

i'm using pagination on page, when click on item pagination, have shifted base frame, not know how written on angular

i have pagination component, code:

app.component(function(storageservice){      storageservice.model = this.model = {      list: ["a", "b", "c"],  	pagenumber: 1,  	totalrows: 5,    };      this.openpagepagination = function(i){          storageservice.model.pagenumber = i;    }    });

<div>    <ul>  <li ng-repeat="el in model.list">{{el}}</li>  </ul>    <pagination processtype="model" />  </div>

<ul class="pagination"       data-count="{{ $ctrl.processtype.totalrows }}"       ng-class="{'hide': !($ctrl.processtype.totalrows > 1)}"      slidepagination>      <li class="pagination-left waves-effect"        ng-class="{ 'disabled' : ($ctrl.processtype.pagenumber == 1) ? 1 : 0 }">      <a><i class="material-icons">chevron_left</i></a>    </li>        <span class="pagination-block">      <span class="pagination-full">                <li ng-repeat=" in [] | range:$ctrl.processtype.totalrows"            ng-class="{'active': == ($ctrl.processtype.pagenumber-1) }"             ng-click="$ctrl.processtype.openpagepagination(i+1)"            class="pag-element"            data-list="{{ i+1 }}">            <a> {{ i+1 }} </a>        </li>        </span>    </span>      <li class="pagination-right waves-effect"         ng-class="{ 'disabled' : ($ctrl.processtype.pagenumber == $ctrl.processtype.totalrows) ? 1 : 0 }">      <a><i class="material-icons">chevron_right</i></a>    </li>  </ul>

but not know how rewrite animation on angular

because, have it:

export default function (storageservice) {    let directive = {      restrict: 'a',      link: link    }      return directive;      function link($scope, element, attrs) {      console.log($scope);        settimeout(function(){          let dleft = $('.pagination-left');        let dright = $('.pagination-right');        let length = 0;          $scope.state = 1;        function initialstate(){              // обновляем пагинацию            $('.pagination').find('.pagination-full').each(function(i, e){              let el = $(e);              let parent = el.parent().parent();              let count = parseint(parent.attr('data-count'));              if (count) el.css('width', (count * $scope.widthframe)  + 'px');            });              $('.pagination-full li').unbind("click").on("click", function(){                if ($scope.state) {                  $scope.state = 0;                let full = $(this).parent();                let index = parseint(full.parent().attr('data-pageindex')) || 1;                let currentindex = parseint($(this).attr('data-list')) + 1;                let frame = math.abs(parseint(full.css('margin-left')));                  frame = (currentindex > 3) ? $scope.widthframe * (currentindex - $scope.showframe) : 0;                full.parent().attr('data-pageindex', currentindex);                full.animate({'margin-left': `-${frame}px`}, $scope.time, ()=>{                  $scope.state = 1;                  storageservice.plugin.settooltip();                });                }              });          }           setinterval(()=>{            let count = $('.pagination li').length;          if (length != count) {            initialstate();            length = count;          }          }, 1000);          // события левой клавиши        dleft.unbind("click").on("click", function(){            let parent = $(this).parent();            parent.find('.active').prev().click();        });          // события правой клавишы        dright.unbind("click").on("click", function(){          let parent = $(this).parent();          parent.find('.active').next().click();        });          }, 300);      }  }