title: Nested directives and parent scopes
body: <p>The problem I have can be see at <a href="http://jsfiddle.net/miketheanimal/2CcYp/13/" rel="noreferrer">http://jsfiddle.net/miketheanimal/2CcYp/13/</a> This strips down my problem to a minimum.</p>
  
  <p>I have a controller "main", a directive "outer" which transclude's, and a directive "inner" which doesn't. Each directive has an isolate scope and a controller. The main and the directive controllers set $scope._name = '...' so I can tell them apart.</p>
  
  <pre><code>var module = angular.module('miketa', []);
  function main ($scope) {
      $scope._name = 'main' ;
  } ;
  module.directive('outer', function() {
      return {
          restrict: 'E',
          replace: true,
          transclude: true,
          scope: {},
          template: '&lt;div&gt;&lt;div ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;',
          controller: [ '$scope', function($scope) {
              $scope._name = 'outer' ;
              document.getElementById('opn').innerHTML = $scope.$parent._name ;
          }]}});
  module.directive('inner', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: {},
          template: '&lt;div&gt;&lt;/div&gt;',
          controller: [ '$scope', function($scope) {
              $scope._name = 'inner' ;
              document.getElementById('ipn').innerHTML = $scope.$parent._name ;
          }]}});
  </code></pre>
  
  <p>The HTML nests these as main -> outer -> inner. The controller functions in the directives copy their <strong>parent</strong> scope name (ie., *$scope.$parent._name) into the rendered HTML (apologies for manipulating the DOM directly, it was the easiest way to display the names!).</p>
  
  <p>I would expect <em>outer</em> to show the name from the controller (ie., "main") which is does, and I'd expect <em>inner</em> to show the name from <em>outer</em> (ie., "outer"), which is doesn't, rather it shows "main" as well.</p>
  
  <p>The problem actually manifests itself since in the real code, I'd like to bind between the <em>inner</em> and <em>outer</em> scopes, but <em>inner</em> ends up binding to the <em>main</em> scope.</p>