AngularJS: nested directives & Two-Way Binding -

i've created directive pgpaginator:

function paginatordirective() {     return {         restrict: 'e',         require: 'ngmodel',         templateurl: 'paginator.html',         scope: {             ngmodel: '=',         },     }; }  // ...  .directive('pgpaginator', paginatordirective) 

paginator.html:

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

and tryed create directive pg-paginator-page use pgpaginator scope:

    .directive('pgpaginatorpage', function() {         return {             restrict: 'a',             replace: true,             template: '<input ng-model="ngmodel.page" type="number" />',             link: function(scope, element, attrs) {                 console.log(scope)             },         }     }) 

but when create directive, two-way binding broken: http://embed.plnkr.co/h85hak/preview

what doing wrong?