Pagination with bootstrap-ui and angular

This example of pagination uses the following combination: angular 1.4, bootstrap-ui 2.5 Mock data from https://mockaroo.com/

by santhosh lanka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<h1>
Simple angularjs bootstrap ui pagination example
</h1>
<div ng-app='myApp'>
  <div ng-controller='paginate'>

    <table class="table">
      <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
        <td>{{row.name}}</td>
        <td>{{row.id}}</td>
      </tr>
    </table>
    View
    <select ng-model="viewby" ng-change="setItemsPerPage(viewby)">
 <option value="3">3</option>
 <option value="5">5</option>
 <option value="10">10</option>
 <option value="20">20</option>
</select> records at a time.

    <div uib-pagination num-pages="numPages" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" class="pagination-sm" max-size="maxSize" rotate="false" boundary-links="true" ng-change="pageChanged()">
    </div>

    <hr />
    
    <p>Page: {{currentPage}} / {{numPages}}</p>
    
    <p>
    Lanka
    </p>

  </div>

JavaScript

var mockData = [{
  "id": 1,
  "name": "Spizaetus coronatus",
  "avatar": "https://robohash.org/repellatdignissimostempora.png?size=50x50&set=set1",
  "color": "#6b6607"
}, {
  "id": 2,
  "name": "Priodontes maximus",
  "avatar": "https://robohash.org/remnecessitatibusquod.bmp?size=50x50&set=set1",
  "color": "#33adf4"
}, {
  "id": 3,
  "name": "Gekko gecko",
  "avatar": "https://robohash.org/laudantiummagnamtempora.png?size=50x50&set=set1",
  "color": "#b216e0"
}, {
  "id": 4,
  "name": "Aonyx capensis",
  "avatar": "https://robohash.org/occaecatiaspernaturlabore.bmp?size=50x50&set=set1",
  "color": "#b93048"
}, {
  "id": 5,
  "name": "Spermophilus lateralis",
  "avatar": "https://robohash.org/accusantiumipsamconsequuntur.bmp?size=50x50&set=set1",
  "color": "#710290"
}, {
  "id": 6,
  "name": "Aegypius occipitalis",
  "avatar": "https://robohash.org/culpadoloresadipisci.bmp?size=50x50&set=set1",
  "color": "#48a7b0"
}, {
  "id": 7,
  "name": "Geochelone elephantopus",
  "avatar": "https://robohash.org/itaquealiquidquia.jpg?size=50x50&set=set1",
  "color": "#bd55bb"
}, {
  "id": 8,
  "name": "Macaca fuscata",
  "avatar": "https://robohash.org/quaeratreprehenderitminus.bmp?size=50x50&set=set1",
  "color": "#ebb7bf"
}, {
  "id": 9,
  "name": "Ramphastos tucanus",
  "avatar": "https://robohash.org/vitaeitaquequi.png?size=50x50&set=set1",
  "color": "#b00e91"
}, {
  "id": 10,
  "name": "Phoca vitulina",
  "avatar": "https://robohash.org/incidunteaquequi.png?size=50x50&set=set1",
  "color": "#05973c"
}, {
  "id": 11,
  "name": "Anthropoides paradisea",
  "avatar": "https://robohash.org/quosrerumvoluptate.jpg?size=50x50&set=set1",
  "color": "#b96d51"
}, {
  "id": 12,
  "name": "Aonyx capensis",
  "avatar": "https://robohash.org/voluptasutsoluta.bmp?size=50x50&set=set1",
  "color": "#ed5744"
}, {
  "id": 13,
  "name": "Spheniscus magellanicus",
  "avatar": "https://robohash.org/estnamvoluptas.png?size=50x50&set=set1",
  "color": "#5b05a9"
}, {
  "id": 14,
  "name":...