enter image description here

How to make the controls appear in the correct order?

<ul class="pagination" ng-if="1 < pages.length || !autoHide"> <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }"> <a href="" ng-click="setCurrent(1)">&laquo;</a> </li> <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }"> <a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a> </li> <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index) | reverse" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }"> <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a> </li> <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }"> <a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a> </li> <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }"> <a href="" ng-click="setCurrent(pagination.last)">&raquo;</a> </li> </ul>

HTML

 <dir-pagination-controls boundary-links="true" align="center" pagination-id="owner" template-url="views\dirPagination.tpl.html"></dir-pagination-controls> <div dir-paginate="item in graveData | filter:q | itemsPerPage: pageSize" current-page="currentPage" pagination-id="owner">

    0