Pagination

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-controller="someController">

    <pagination  
        total-items="totalItems" 
        items-per-page= "itemsPerPage"
        ng-model="currentPage" 
        class="pagination-sm">
    </pagination>

    <div ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage)"> 
        {{country.name}}
    </div>

</div>

JavaScript

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

app.controller('someController', function($scope, $filter) {
    $scope.countries = [];
    $scope.currentPage = 1;
    $scope.itemsPerPage = 20;
    $scope.maxSize = 20;
    $scope.totalItems = 250;
    
    for(var i = 0; i < 250; i++){
    	$scope.countries[i] = { name: 'country ' + i }
    }
});