Angular ui-bootstrap pagination example.

var app = angular.module('angularjs-starter', [ 'ui.bootstrap.pagination' ]);

app.factory( 'myData', function() {
  var data = [];
  
  // push some dummy data
  for(var i = 0; i < 30; i++) {
    data.push( { name: "item"+i } );
  }
  
  return {
    get: function(offset, limit) {
      return data.slice( offset, offset+limit );
    },
    getMore : function(offset, limit) {
			data = [];
			var start = data.length
			var end = start + 20

			// push some dummy data
			for (var i = start; i < end; i++) {
				data.push({
					name : "item" + i
				});
			}
			return data
		},
		count: function() {
      return data.length;
    }
  };
});

app.controller('MainCtrl', function($scope, myData) {
  $scope.numPerPage = 5;
  $scope.noOfPages = function(){
    return Math.ceil(myData.count() / $scope.numPerPage);
  }
  $scope.currentPage = 1;
  
  

  $scope.setPage = function () {
    $scope.data = myData.get( ($scope.currentPage - 1) * $scope.numPerPage, $scope.numPerPage );
  };
  
  $scope.addData = function() {
		$scope.data = myData.getMore(($scope.currentPage - 1) * $scope.numPerPage,
				$scope.numPerPage);
	};
  
  $scope.$watch( 'currentPage', $scope.setPage );
});

angular.module('ui.bootstrap.pagination', [])

.directive('pagination', function() {
  return {
    restrict: 'E',
    scope: {
      numPages: '=',
      currentPage: '=',
      onSelectPage: '&'
    },
    templateUrl: 'pagination.html',
    replace: true,
    link: function(scope) {
      scope.$watch('numPages', function(value) {
        scope.pages = [];
        for(var i=1;i<=value;i++) {
          scope.pages.push(i);
        }
        if ( scope.currentPage > value ) {
          scope.selectPage(value);
        }
      });
      scope.noPrevious = function() {
        return scope.currentPage === 1;
      };
      scope.noNext = function() {
        return scope.currentPage === scope.numPages;
      };
      scope.isActive = function(page) {
        return scope.currentPage === page;
      };

      scope.selectPage = function(page) {
        if ( ! scope.isActive(page) ) {
          scope.currentPage = page;
          scope.onSelectPage({ page: page });
        }
      };

      scope.selectPrevious = function() {
        if ( !scope.noPrevious() ) {
          scope.selectPage(scope.currentPage-1);
        }
      };
      scope.selectNext = function() {
        if ( !scope.noNext() ) {
          scope.selectPage(scope.currentPage+1);
        }
      };
    }
  };
});

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="pagination.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <div><a ng-click="addData()">Add</a></div>
    <ul>
      <li ng-repeat="item in data">{{item.name}}</li>
    </ul>
    <pagination num-pages="noOfPages()" current-page="currentPage" class="pagination-small"></pagination>
  </body>

</html>

<div class="pagination"><ul>
  <li ng-class="{disabled: noPrevious()}"><a ng-click="selectPrevious()">Previous</a></li>
  <li ng-repeat="page in pages" ng-class="{active: isActive(page)}"><a ng-click="selectPage(page)">{{page}}</a></li>
  <li ng-class="{disabled: noNext()}"><a ng-click="selectNext()">Next</a></li>
  </ul>
</div>

/* CSS goes here */