Paging using angularjs bootstrap

Problem

I am trying to follow the example here for pagination.

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 data-ng-click="setPage()" on the pager in the example below

<!doctype html>
<html ng-app="PagingModule">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
        rel="stylesheet">
    <script type="text/javascript">

        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

            };
        }
        );


    </script>
</head>
<body>
    <div ng-controller="PaginationCtrl" class="well well-small">
        <pagination data-ng-click="setPage()" boundary-links="true" num-pages="noOfPages"
            current-page="currentPage" class="pagination-small" previous-text="&lsaquo;"
            next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
        {{currentPage}}
    </div>
</body>
</html>
Problem courtesy of: developer747

Solution

There is no data-ng-click attribute for the pagination directive of angular-ui. Clicking on one of the page numbers sets the $scope.currentPage variable in your controller, or whatever you set in the attribute current-page="currentPage"

You could set up a $scope.$watch on that variable to react to changes.

Solution courtesy of: m.e.conroy

Discussion

Use ng-change

Angular bootstrap pagination can use the ng-change attribute. It represents a function which may be called when the paging is changed. Get the current page using ng-model:

<pagination ... ng-change="setPage()" ng-model="current_page"></pagination>

For older versions <= 0.11

You can define a function in controller and pass it an attribute using on-select-change:

<pagination ... on-select-change="setPage(page)"></pagination>

See more here: https://github.com/angular-ui/bootstrap/blob/master/src/pagination/docs/readme.md

See the breaking change to the code here.

Discussion courtesy of: Visya

This recipe can be found in it's original form on Stack Over Flow.