title: Paging using angularjs bootstrap
body: <p>I am trying to follow the example <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">here</a> for pagination.</p>
  
  <p>I have was able to get to a stage where I am able to show the new page number, but I am not able to fire a click event. What can I do to trigger <code>data-ng-click="setPage()"</code> on the pager in the example below</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="PagingModule"&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"&gt;&lt;/script&gt;
      &lt;link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
          rel="stylesheet"&gt;
      &lt;script type="text/javascript"&gt;
  
          var PagingModule = angular.module('PagingModule', ['ui.bootstrap']);
  
          PagingModule.controller('PaginationCtrl', function PaginationCtrl($scope) {
  
  
              $scope.noOfPages = 7;
              $scope.currentPage = 1;
  
              $scope.setPage = function () {
                  alert("in");//I am unable to reach this code
  
              };
          }
          );
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-controller="PaginationCtrl" class="well well-small"&gt;
          &lt;pagination data-ng-click="setPage()" boundary-links="true" num-pages="noOfPages"
              current-page="currentPage" class="pagination-small" previous-text="&amp;lsaquo;"
              next-text="&amp;rsaquo;" first-text="&amp;laquo;" last-text="&amp;raquo;"&gt;&lt;/pagination&gt;
          {{currentPage}}
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>