diff --git a/src/pagination/docs/demo.html b/src/pagination/docs/demo.html
index c1d999487f..75156b9f6e 100644
--- a/src/pagination/docs/demo.html
+++ b/src/pagination/docs/demo.html
@@ -1,19 +1,19 @@
 <div ng-controller="PaginationDemoCtrl">
     <h4>Default</h4>
-    <pagination total-items="totalItems" page="currentPage"></pagination>
-    <pagination boundary-links="true" total-items="totalItems" page="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
-    <pagination direction-links="false" boundary-links="true" total-items="totalItems" page="currentPage"></pagination>
-    <pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
+    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
+    <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
+    <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
+    <pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
     <pre>The selected page no: {{currentPage}}</pre>
     <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
 
     <hr />
     <h4>Pager</h4>
-    <pager total-items="totalItems" page="currentPage"></pager>
+    <pager total-items="totalItems" ng-model="currentPage"></pager>
 
     <hr />
     <h4>Limit the maximum visible buttons</h4>
-    <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
-    <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
+    <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
+    <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
     <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
 </div>
diff --git a/src/pagination/docs/demo.js b/src/pagination/docs/demo.js
index 889e50e1e1..4b791e490b 100644
--- a/src/pagination/docs/demo.js
+++ b/src/pagination/docs/demo.js
@@ -1,12 +1,16 @@
 var PaginationDemoCtrl = function ($scope) {
   $scope.totalItems = 64;
   $scope.currentPage = 4;
-  $scope.maxSize = 5;
-  
+
   $scope.setPage = function (pageNo) {
     $scope.currentPage = pageNo;
   };
 
+  $scope.pageChanged = function() {
+    console.log('Page changed to: ' + $scope.currentPage);
+  };
+
+  $scope.maxSize = 5;
   $scope.bigTotalItems = 175;
   $scope.bigCurrentPage = 1;
 };
diff --git a/src/pagination/docs/readme.md b/src/pagination/docs/readme.md
index dbb09eabb3..aa88476f55 100644
--- a/src/pagination/docs/readme.md
+++ b/src/pagination/docs/readme.md
@@ -5,7 +5,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
 
 Settings can be provided as attributes in the `<pagination>` or globally configured through the `paginationConfig`.
 
- * `page` <i class="glyphicon glyphicon-eye-open"></i>
+ * `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
  	:
  	Current page number. First page is 1.
 
@@ -29,10 +29,6 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
  	_(Defaults: true)_ :
  	Whether to keep current page in the middle of the visible ones.
 
- * `on-select-page (page)`
- 	_(Default: null)_ :
- 	An optional expression called when a page is selected having the page number as argument.
-
  * `direction-links`
  	_(Default: true)_ :
  	Whether to display Previous / Next buttons.
@@ -60,7 +56,7 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
 ### Pager Settings ###
 
 Settings can be provided as attributes in the `<pager>` or globally configured through the `pagerConfig`.  
-For `page`, `total-items`, `items-per-page`, `num-pages` and `on-select-page (page)` see pagination settings. Other settings are:
+For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:
 
  * `align`
  	_(Default: true)_ :
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
index d30abccaae..9b75a23ef9 100644
--- a/src/pagination/pagination.js
+++ b/src/pagination/pagination.js
@@ -2,9 +2,16 @@ angular.module('ui.bootstrap.pagination', [])
 
 .controller('PaginationController', ['$scope', '$attrs', '$parse', '$interpolate', function ($scope, $attrs, $parse, $interpolate) {
   var self = this,
+      ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
       setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
 
-  this.init = function(defaultItemsPerPage) {
+  this.init = function(ngModelCtrl_, defaultItemsPerPage) {
+    ngModelCtrl = ngModelCtrl_;
+
+    ngModelCtrl.$render = function() {
+      self.render();
+    };
+
     if ($attrs.itemsPerPage) {
       $scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
         self.itemsPerPage = parseInt(value, 10);
@@ -36,7 +43,7 @@ angular.module('ui.bootstrap.pagination', [])
   };
 
   this.render = function() {
-    this.page = parseInt($scope.page, 10) || 1;
+    this.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
     if (this.page > 0 && this.page <= $scope.totalPages) {
       $scope.pages = this.getPages(this.page, $scope.totalPages);
     }
@@ -44,8 +51,8 @@ angular.module('ui.bootstrap.pagination', [])
 
   $scope.selectPage = function(page) {
     if ( ! self.isActive(page) && page > 0 && page <= $scope.totalPages) {
-      $scope.page = page;
-      $scope.onSelectPage({ page: page });
+      ngModelCtrl.$setViewValue(page);
+      ngModelCtrl.$render();
     }
   };
 
@@ -63,7 +70,7 @@ angular.module('ui.bootstrap.pagination', [])
     if ( self.page > value ) {
       $scope.selectPage(value);
     } else {
-      self.render();
+      ngModelCtrl.$render();
     }
   });
 }])
@@ -83,14 +90,18 @@ angular.module('ui.bootstrap.pagination', [])
   return {
     restrict: 'EA',
     scope: {
-      page: '=',
-      totalItems: '=',
-      onSelectPage:' &'
+      totalItems: '='
     },
+    require: ['pagination', '?ngModel'],
     controller: 'PaginationController',
     templateUrl: 'template/pagination/pagination.html',
     replace: true,
-    link: function(scope, element, attrs, paginationCtrl) {
+    link: function(scope, element, attrs, ctrls) {
+      var paginationCtrl = ctrls[0], ngModel = ctrls[1];
+
+      if (!ngModel) {
+         return; // do nothing if no ng-model
+      }
 
       // Setup configuration parameters
       var maxSize,
@@ -102,7 +113,7 @@ angular.module('ui.bootstrap.pagination', [])
       lastText       = paginationCtrl.getAttributeValue(attrs.lastText,       config.lastText,      true),
       rotate         = paginationCtrl.getAttributeValue(attrs.rotate,         config.rotate);
 
-      paginationCtrl.init(config.itemsPerPage);
+      paginationCtrl.init(ngModel, config.itemsPerPage);
 
       if (attrs.maxSize) {
         scope.$parent.$watch($parse(attrs.maxSize), function(value) {
@@ -203,21 +214,25 @@ angular.module('ui.bootstrap.pagination', [])
   return {
     restrict: 'EA',
     scope: {
-      page: '=',
-      totalItems: '=',
-      onSelectPage:' &'
+      totalItems: '='
     },
+    require: ['pager', '?ngModel'],
     controller: 'PaginationController',
     templateUrl: 'template/pagination/pager.html',
     replace: true,
-    link: function(scope, element, attrs, paginationCtrl) {
+    link: function(scope, element, attrs, ctrls) {
+      var paginationCtrl = ctrls[0], ngModel = ctrls[1];
+
+      if (!ngModel) {
+         return; // do nothing if no ng-model
+      }
 
       // Setup configuration parameters
       var previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true),
       nextText         = paginationCtrl.getAttributeValue(attrs.nextText,     config.nextText,     true),
       align            = paginationCtrl.getAttributeValue(attrs.align,        config.align);
 
-      paginationCtrl.init(config.itemsPerPage);
+      paginationCtrl.init(ngModel, config.itemsPerPage);
 
       // Create page object used in template
       function makePage(number, text, isDisabled, isPrevious, isNext) {
diff --git a/src/pagination/test/pager.spec.js b/src/pagination/test/pager.spec.js
index d03dc12564..3065ba927c 100644
--- a/src/pagination/test/pager.spec.js
+++ b/src/pagination/test/pager.spec.js
@@ -7,7 +7,7 @@ describe('pager directive', function () {
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
-    element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
+    element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -78,13 +78,13 @@ describe('pager directive', function () {
     expect($rootScope.currentPage).toBe(5);
   });
 
-  it('executes the `on-select-page` expression when an element is clicked', function() {
+  it('executes the `ng-change` expression when an element is clicked', function() {
     $rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
-    element = $compile('<pager total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pager>')($rootScope);
+    element = $compile('<pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pager>')($rootScope);
     $rootScope.$digest();
 
     clickPaginationEl(-1);
-    expect($rootScope.selectPageHandler).toHaveBeenCalledWith(4);
+    expect($rootScope.selectPageHandler).toHaveBeenCalled();
   });
 
   it('does not changes the number of pages when `total-items` changes', function() {
@@ -99,7 +99,7 @@ describe('pager directive', function () {
   describe('`items-per-page`', function () {
     beforeEach(inject(function() {
       $rootScope.perpage = 5;
-      element = $compile('<pager total-items="total" items-per-page="perpage" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pager total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -133,7 +133,7 @@ describe('pager directive', function () {
   describe('`num-pages`', function () {
     beforeEach(inject(function() {
       $rootScope.numpg = null;
-      element = $compile('<pager total-items="total" page="currentPage" num-pages="numpg"></pager>')($rootScope);
+      element = $compile('<pager total-items="total" ng-model="currentPage" num-pages="numpg"></pager>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -149,7 +149,7 @@ describe('pager directive', function () {
       pagerConfig.previousText = 'PR';
       pagerConfig.nextText = 'NE';
       pagerConfig.align = false;
-      element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
+      element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
       $rootScope.$digest();
     }));
     afterEach(inject(function(pagerConfig) {
@@ -170,7 +170,7 @@ describe('pager directive', function () {
 
   describe('override configuration from attributes', function () {
     beforeEach(inject(function() {
-      element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" page="currentPage"></pager>')($rootScope);
+      element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></pager>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -191,7 +191,7 @@ describe('pager directive', function () {
     it('changes "previous" & "next" text from interpolated attributes', function() {
       $rootScope.previousText = '<<';
       $rootScope.nextText = '>>';
-      element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pager>')($rootScope);
+      element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pager>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<');
diff --git a/src/pagination/test/pagination.spec.js b/src/pagination/test/pagination.spec.js
index 2479471f45..f2729a6245 100644
--- a/src/pagination/test/pagination.spec.js
+++ b/src/pagination/test/pagination.spec.js
@@ -7,7 +7,7 @@ describe('pagination directive', function () {
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
-    element = $compile('<pagination total-items="total" page="currentPage"></pagination>')($rootScope);
+    element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -125,7 +125,7 @@ describe('pagination directive', function () {
   describe('`items-per-page`', function () {
     beforeEach(inject(function() {
       $rootScope.perpage = 5;
-      element = $compile('<pagination total-items="total" items-per-page="perpage" page="currentPage" on-select-page="selectPageHandler(page)"></pagination>')($rootScope);
+      element = $compile('<pagination total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -165,16 +165,16 @@ describe('pagination directive', function () {
     });
   });
 
-  describe('executes `on-select-page` expression', function () {
+  describe('executes  `ng-change` expression', function () {
     beforeEach(inject(function() {
       $rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
-      element = $compile('<pagination total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pagination>')($rootScope);
+      element = $compile('<pagination total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
     it('when an element is clicked', function() {
       clickPaginationEl(2);
-      expect($rootScope.selectPageHandler).toHaveBeenCalledWith(2);
+      expect($rootScope.selectPageHandler).toHaveBeenCalled();
     });
   });
 
@@ -198,7 +198,7 @@ describe('pagination directive', function () {
       $rootScope.total = 98; // 10 pages
       $rootScope.currentPage = 3;
       $rootScope.maxSize = 5;
-      element = $compile('<pagination total-items="total" page="currentPage" max-size="maxSize"></pagination>')($rootScope);
+      element = $compile('<pagination total-items="total" ng-model="currentPage" max-size="maxSize"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -267,7 +267,7 @@ describe('pagination directive', function () {
       $rootScope.currentPage = 7;
       $rootScope.maxSize = 5;
       $rootScope.rotate = false;
-      element = $compile('<pagination total-items="total" page="currentPage" max-size="maxSize" rotate="rotate"></pagination>')($rootScope);
+      element = $compile('<pagination total-items="total" ng-model="currentPage" max-size="maxSize" rotate="rotate"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -326,7 +326,7 @@ describe('pagination directive', function () {
 
   describe('pagination directive with `boundary-links`', function () {
     beforeEach(inject(function() {
-      element = $compile('<pagination boundary-links="true" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -381,7 +381,7 @@ describe('pagination directive', function () {
     });
 
     it('changes "first" & "last" text from attributes', function() {
-      element = $compile('<pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<<');
@@ -389,7 +389,7 @@ describe('pagination directive', function () {
     });
 
     it('changes "previous" & "next" text from attributes', function() {
-      element = $compile('<pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(1).text()).toBe('<<');
@@ -399,7 +399,7 @@ describe('pagination directive', function () {
     it('changes "first" & "last" text from interpolated attributes', function() {
       $rootScope.myfirstText = '<<<';
       $rootScope.mylastText = '>>>';
-      element = $compile('<pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<<');
@@ -409,7 +409,7 @@ describe('pagination directive', function () {
     it('changes "previous" & "next" text from interpolated attributes', function() {
       $rootScope.previousText = '<<';
       $rootScope.nextText = '>>';
-      element = $compile('<pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(1).text()).toBe('<<');
@@ -419,7 +419,7 @@ describe('pagination directive', function () {
 
   describe('pagination directive with just number links', function () {
     beforeEach(inject(function() {
-      element = $compile('<pagination direction-links="false" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination direction-links="false" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -471,7 +471,7 @@ describe('pagination directive', function () {
   describe('with just boundary & number links', function () {
     beforeEach(inject(function() {
       $rootScope.directions = false;
-      element = $compile('<pagination boundary-links="true" direction-links="directions" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" direction-links="directions" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -503,7 +503,7 @@ describe('pagination directive', function () {
   describe('`num-pages`', function () {
     beforeEach(inject(function() {
       $rootScope.numpg = null;
-      element = $compile('<pagination total-items="total" page="currentPage" num-pages="numpg"></pagination>')($rootScope);
+      element = $compile('<pagination total-items="total" ng-model="currentPage" num-pages="numpg"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -539,7 +539,7 @@ describe('pagination directive', function () {
       paginationConfig.previousText = 'PR';
       paginationConfig.nextText = 'NE';
       paginationConfig.lastText = 'LA';
-      element = $compile('<pagination total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
     afterEach(inject(function(paginationConfig) {
@@ -561,7 +561,7 @@ describe('pagination directive', function () {
 
   describe('override configuration from attributes', function () {
     beforeEach(inject(function() {
-      element = $compile('<pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));