title: AngularJS: nested directives & Two-Way Binding
body: <p>I've created a directive pgPaginator:</p>
  
  <pre><code>function PaginatorDirective() {
      return {
          restrict: 'E',
          require: 'ngModel',
          templateUrl: 'paginator.html',
          scope: {
              ngModel: '=',
          },
      };
  }
  
  // ...
  
  .directive('pgPaginator', PaginatorDirective)
  </code></pre>
  
  <p>paginator.html: </p>
  
  <pre><code>&lt;input pg-paginator-page /&gt;
  &lt;select pg-paginator-perpage ng-model="ngModel.perpage" ng-options="option for option in ngModel.perpageOptions"&gt;&lt;/select&gt;
  &lt;br /&gt;
  {{ngModel}}
  &lt;br /&gt;
  {{ngModel.page}}
  </code></pre>
  
  <p>and i tryed to create another directive pg-paginator-page that use pgPaginator scope:</p>
  
  <pre><code>    .directive('pgPaginatorPage', function() {
          return {
              restrict: 'A',
              replace: true,
              template: '&lt;input ng-model="ngModel.page" type="number" /&gt;',
              link: function(scope, element, attrs) {
                  console.log(scope)
              },
          }
      })
  </code></pre>
  
  <p>But when I create this directive, two-way binding is broken: <a href="http://embed.plnkr.co/h85hAk/preview" rel="nofollow">http://embed.plnkr.co/h85hAk/preview</a></p>
  
  <p>What am I doing wrong?</p>