title: AngularJS: rootScope in directives scopes
body: <p>For example I have directive <strong></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>App.directive('module', function($compile)
  {   
      return  {
  
          replace     : true,         
          restrict    : 'E',
          link: function(scope, iElement, iAttrs)
          {   
              scope.localName = '1';
          },
  
          template : '&lt;div&gt; {{ name }} - {{ localName }}&lt;/div&gt;',  
      }       
  });
  </code></pre>
  
  <p>At application run function:</p>
  
  <pre class="lang-js prettyprint-override"><code>App.run(function($rootScope, $location)
  {
      $rootScope.name = "test";
  }
  </code></pre>
  
  <p>So in this way directive's scope will be same for all directives but this scope will have access to <strong>$rootScope</strong>:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;module&gt;&lt;/module&gt; 
  &lt;module&gt;&lt;/module&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/QF8wM.png" alt="http://i.stack.imgur.com/QF8wM.png"></p>
  
  <p>But if I will make an isolated scope:</p>
  
  <pre class="lang-js prettyprint-override"><code>App.directive('module', function()
  {   
      return  {
  
          replace     : true,         
          restrict    : 'E',
          link: function(scope, iElement, iAttrs)
          {   
              scope.localName = '1';
          },
  
          template : '&lt;div&gt; {{ name }} - {{ localName }}&lt;/div&gt;',
              scope : {}  
      }       
  });
  </code></pre>
  
  <p>Scopes will be different, but they will be have access to <strong>$rootScope</strong>.</p>
  
  <p><img src="https://i.stack.imgur.com/XITHr.png" alt="http://i.stack.imgur.com/XITHr.png"></p>
  
  <p>So I need to isolate the scope of each directive but I need this scope to have access to <strong>$rootScope</strong>.</p>
  
  <p>Can you help me please?</p>