title: AngularJS : directive scope inheritance
body: <h2>Preface</h2>
  
  <p>When I declare a directive under a controller, e.g.</p>
  
  <pre><code>&lt;div ng-controller="MyController"&gt;
    &lt;my-directive&gt;&lt;/my-directive&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the directive inherits that controller's scope by default.  This means if the controller defines</p>
  
  <pre><code>$scope.Heaven = "Free Beer"
  </code></pre>
  
  <p>then I have access to that within the directive's template via</p>
  
  <pre><code>{{ Heaven }}
  </code></pre>
  
  <h2>Question</h2>
  
  <p>When declaring a directive within another directive, why doesn't the child inherit scope like it would if placed in a controller?</p>
  
  <pre><code>&lt;my-parent-directive&gt;
    &lt;my-child-directive&gt;
    &lt;/my-child-directive&gt;
  &lt;/my-parent-directive&gt;
  </code></pre>
  
  <p>In short, if I declare a controller function for my-parent-directive and in it write:</p>
  
  <pre><code>$scope.Heaven = "Free Beer"
  </code></pre>
  
  <p>My child directive doesn't have access to this by default.  Why is that?
  (This assumes "scope: true" within the parent, no scope declaration in the child, and the child requiring the parent via "require: 'my-parent-directive')</p>
  
  <h2>Example codepens:</h2>
  
  <p><a href="http://codepen.io/anon/pen/dPGOqw?editors=101" rel="nofollow">Directive wrapped in controller</a><br>
  <a href="http://codepen.io/anon/pen/eNMqyx?editors=101" rel="nofollow">Directive wrapped in directive</a></p>
  
  <p>Question was modified after answer was given - the below is to preserve the reference<br>
  <a href="http://codepen.io/anon/pen/EaPNqp?editors=101" rel="nofollow">Directive wrapped in directive old</a></p>