I am getting the data from database via http post call and rendering the table. Well the implementation code looks fine however, the pagination doesn't seem to work.
I implemented it according to my requirement and I get the response which I can see in chrome console. What could be wrong with the pagination as I am not able to see any pagination buttons.
Here's the code:
<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <base href="/"> <title>The Single Page Blogger</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script> <script src="<%=request.getContextPath()%>/js/module.js"></script> <link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" /> <script> //Get table from Server and do pagination app.controller("tableController", function ($scope, $http) { $scope.filteredTodos = [] , $scope.currentPage = 1 , $scope.numPerPage = 10 , $scope.maxSize = 5; $scope.getTable = function () { $scope.customerTable = []; $http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data) { $scope.customerTable = data; }); }; $scope.getTable(); $scope.$watch("currentPage + numPerPage", function () { var begin = (($scope.currentPage - 1) * $scope.numPerPage) , end = begin + $scope.numPerPage; $scope.filteredTodos = $scope.customerTable.slice(begin, end); }); }); </script> </head> <body> <div class="container" id="main"><br/><br/> Search: <input type="text" ng-model="search" placeholder="Search"> <div ng-controller="tableController"> <table class="table table-striped table-hover table-bordered"> <tr> <th style="font-size: 13.3px">Card number</th> <th style="font-size: 13.3px">First name</th> <th style="font-size: 13.3px">Opening balance</th> <th style="font-size: 13.3px">Withdrawal</th> <th style="font-size: 13.3px">Deposit</th> <th style="font-size: 13.3px">Closing balance</th> <th style="font-size: 13.3px">Tx date</th> <th style="font-size: 13.3px">Usage type</th> </tr> <tr ng-repeat="data in customerTable| filter: search"> <td>{{data.CARD_NUMBER}}</td> <td>{{data.FIRST_NAME}}</td> <td>{{data.OPENING_BALANCE}}</td> <td>{{data.WITHDRAWAL}}</td> <td>{{data.DEPOSIT}}</td> <td>{{data.CLOSING_BAL}}</td> <td>{{data.TXDATE}}</td> <td>{{data.USAGE_TYPE}}</td> </tr> </table> <pagination ng-model="currentPage" total-items="customerTable.length" max-size="maxSize" boundary-links="true"> </pagination> <br/><br/><br> </form> </div> </div> </body> </html> Here's the plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview
Module:
var app = angular.module('myApp', ['ui.bootstrap']); 
['ui.bootstrap']defined as a dependency injected? As in like,var app = angular.module('app', ['ui.bootstrap']);??ui-bootstrap-tpls-0.12.1.min.jsscript in your code, did you check you have everything like the plunker?