Angular+JQ+Bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="item in catalogData | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
  </button>
  {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
  </button>
</div>

JavaScript

var app = angular.module('myApp', []);

function MyCtrl($scope, dataService) {
  $scope.currentPage = 0;
  $scope.pageSize = 4;

  dataService.getData().then(function(data) {
    $scope.catalogData = data;
    $scope.numberOfPages = function() {
      return Math.ceil($scope.catalogData.length / $scope.pageSize);
    };
  });
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});
app.service("dataService", function($http) {
  this.getData = function() {
    return $http({
      method: 'GET',
      url: 'https://api.myjson.com/bins/llzg3',
    }).then(function(data) {
      return data.data;
    });
  };
});