title: angular directive transclusion and inheritance
body: <p>I've got three directives:</p>
  
  <p>aiOutter, aiMiddle, and aiInner.</p>
  
  <pre><code>app.directive('aiOutter', function() {
    return {
      restrict: 'A',
      scope: {
        data: '='
      },
      template: '&lt;div&gt;Outter: {{data}}&lt;/div&gt;',
      transclude: true,
      link: function(scope, elem, attrs) {
        console.log('outter recognized');
        return console.log('outter data:', scope.data);
      }
    };
  }).directive('aiMiddle', function() {
    return {
      restrict: 'A',
      scope: {
        data: '='
      },
      template: '&lt;div&gt;Middle: {{data}}&lt;/div&gt;',
      transclude: true,
      link: function(scope, elem, attrs) {
        console.log('middle recognized');
        return console.log('middle data:', scope.data);
      }
    };
  }).directive('aiInner', function() {
    return {
      restrict: 'A',
      scope: {
        data: '='
      },
      template: '&lt;div&gt;Inner: {{data}}&lt;/div&gt;',
      link: function(scope, elem, attrs) {
        console.log('inner recognized');
        console.log('inner data:', scope.data);
        scope.changeData = function(newData) {
          scope.data = newData;
        }
      }
    };
  });
  </code></pre>
  
  <p>My markup looks like the following:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;div ai-outter data="name"&gt;
        &lt;div ai-middle data="data"&gt;
          &lt;div ai-inner data="data"&gt;
          &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Only the outter most directive seems to be picked up. What do I need to do to be able to use this inheritance pattern as well as be able to populate the inner-most directive with transcluded markup?</p>
  
  <p>Plunker: <a href="http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV" rel="nofollow">http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV</a></p>
  
  <p><strong>EDIT</strong> Clarification</p>
  
  <p>I edited my markup a as suggested by PascalPrecht (the updated plunker is here: <a href="http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV" rel="nofollow">http://plnkr.co/edit/HvaJKmGH2agEOKHGrZvV</a> )</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;div ai-outter data="name" ng-transclude&gt;
        &lt;div ai-middle data="name" ng-transclude&gt;
          &lt;div ai-inner data="name" ng-transclude&gt;
           &lt;h1&gt; Hello, {{name}}&lt;/h1&gt;
           &lt;button ng-click="name = 'bob'"&gt;Click me&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However, I think I'm running into a scoping issue. When I push the button, the {{name}} model should bind all the way back up, should it not? Currently, only the inner-most scope is being updated.</p>
  
  <p>I think I'm confused about scoping when it comes to directives.</p>