title: Are scopes within each independent directive isolated and private within that directive?
body: <p>The html code is as follows </p>
  
  <pre><code>&lt;div class="dir-view" &gt;
      // unable to get {{ button.content }}
      &lt;button type="button" id="notworking" ng-show="button.content.length" &gt;{{ button.content }}&lt;/button&gt;
  
  &lt;/div&gt;
  &lt;div class="dir-design" &gt;
       //able to get {{ button.content }}
      &lt;button type="button" id="working" ng-show="button.content.length" &gt;{{ button.content }}&lt;/button&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="label label-primary" for="button-content"&gt;BUTTON CONTENT :&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;textarea class="form-control" id="button-content" rows="4" cols="50" ng-model="button.content"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the above code dir-view and dir-design are the custom directives I have defined .</p>
  
  <p>In the button tag within div#dir-view I am unable to get {{ button.content }} .</p>
  
  <p>whereas within div#dir-design I am able to get {{ button.content }}.</p>
  
  <p>I think that the scope object within the dir-design directive is not accessible within the dir-view . </p>
  
  <p>Is this the reason why I am unable to access <strong>{{ button.content }}</strong> inside dir-view.</p>
  
  <p>Are the scopes within each directive isolated and private to that directive ?.</p>
  
  <p>If I am right , can someone please guide me in solving this problem by making <strong>{{ button.content }}</strong>  of one directive dir-design, accessible even within dir-view (that is the neighboring directive ).</p>
  
  <p>Also if possible please guide me to good document on angular js scopes. </p>
  
  <p>attaching the scope screen I got from angular debug chrome plugin 
  <img src="https://i.stack.imgur.com/rI76K.png" alt="enter image description here"></p>
  
  <p>My controller.js file content showing directive </p>
  
  <pre><code>angular.module('modFoundation', ['$strap.directives'])
       //directive to include view panel
      .directive('dirView', function() {
         return {
             restrict : 'CAME',
             templateUrl: 'templates/view.html',
             transclude: true
         };
      })
      //directive to include design panel
      .directive('dirDesign', function() {
          return {
              restrict : 'CAME',
              templateUrl: 'templates/design.html',
              transclude: true
          };
      })
  </code></pre>