<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <section ng-controller="fooController">
      <div>
        <input ng-model="modelPaginator.page" type="number" />
        <select 
          ng-model="modelPaginator.perpage" 
          ng-options="perpage for perpage in modelPaginator.perpageOptions"
        >
        </select>
      </div>

      <br /><br />

      <div>
        <pg-paginator ng-model="modelPaginator">
        </pg-paginator>
      </div>
    </section>
  </body>

</html>
// Code goes here

(function(){
    function PaginatorDirective() {
        return {
            restrict: 'E',
            require: 'ngModel',
            templateUrl: 'paginator.html',
            scope: {
                ngModel: '=',
            },
        };
    }
    
    function fooController($scope) {
        $scope.modelPaginator = {
            page: 1,
            perpageOptions: [5, 10, 20],
            perpage: 5
        };
    }
    fooController.$inject = ['$scope'];

    angular.module('app', [])
        .controller('fooController', fooController)
        .directive('pgPaginator', PaginatorDirective)
        .directive('pgPaginatorPage', function() {
            return {
                restrict: 'A',
                replace: true,
                template: '<input type="number" ng-model="ngModel.page" />',
                scope: false,
                link: function(scope) {
                    // el scope de la directiva parece ser el mismo que el de pgPaginator
                    console.log(scope.ngModel);
                }
            };
        });
        
        
})();
/* Styles go here */

<input pg-paginator-page />
<select pg-paginator-perpage ng-model="ngModel.perpage" ng-options="option for option in ngModel.perpageOptions"></select>
<br />
{{ngModel}}
<br />
{{ngModel.page}}