title: Outer AngularJS directive doesn't build inner directive correctly
body: <p>Using AngularJS 1.0.8, I'm trying to create some reusable directives to create a situation where a web developer can code a single "top-level" directive with a number of attributes, and this directive, in turn, has a template containing other directives, which themselves might contain other directives etc.</p>
  
  <p>The problem I'm having is making the "inner" templates aware of the top level attributes. I thought this would be a universal problem, but it didn't look, from my research, that anyone else was asking this. </p>
  
  <p>I created this <a href="http://plnkr.co/edit/C3wq6F1Z3AppOstqDkKl?p=preview" rel="nofollow">Plunker</a> to show the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="outerInnerDirectivesApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Outer/Inner Directives&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;Single level directive follows:&lt;/div&gt;
  &lt;single-level-directive single-level-id="single123"&gt;&lt;/single-level-directive&gt;
  &lt;div&gt;Outer/inner directive follows (Expecting "outer123"):&lt;/div&gt;
  &lt;outer-directive outer-id="outer123"&gt;&lt;/outer-directive&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;script src="directives.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>In the Plunker, </p>
  
  <ol>
  <li><p>single-level-directive works and is, I think, a standard way to display data.</p></li>
  <li><p>outer-directive and inner-directive aren't working. </p></li>
  </ol>
  
  <p>What I expected to happen with these was </p>
  
  <p>(i) outerDirective compiles/links to produce the html </p>
  
  <pre><code>&lt;inner-directive inner-id="outer123"&gt;&lt;/inner-directive&gt;
  </code></pre>
  
  <p>and then </p>
  
  <p>(ii) innerDirective compiles/links to produce html</p>
  
  <pre><code>&lt;div&gt;outer123&lt;/div&gt;
  </code></pre>
  
  <p>But at step (ii) I get </p>
  
  <pre><code>&lt;inner-directive inner-id="" class="ng-isolate-scope ng-scope"&gt;
     &lt;div class="ng-binding"&gt;&lt;/div&gt;
  &lt;/inner-directive&gt;
  </code></pre>
  
  <p>so an empty div is generated by innerDirective.</p>
  
  <p>In fact, if I change outer-template.html to be </p>
  
  <pre><code>&lt;div&gt;{{outerId}}&lt;div&gt;
  </code></pre>
  
  <p>then the value displays correctly, so it looks like scope.outerId is available at the correct point, but Angular isn't happy about me trying to use it in the way I am.</p>
  
  <p>Is this a reasonable thing to expect Angular to do? If so, what am I missing? If not, then what do you think would be a sensible alternative way to build up more complex screens from simple sets of directives?</p>