title: Is it possible for the transclusion scope to access the directive scope
body: <p>Continuing the discussion in 
  <a href="https://stackoverflow.com/questions/16653004/confused-about-angularjs-transcluded-and-isolate-scopes-bindings#">Confused about Angularjs transcluded and isolate scopes &amp; bindings</a></p>
  
  <pre><code>&lt;controller&gt;
  
    &lt;directive&gt;
  
       transcluded html
  
    &lt;/directive&gt;
  
  &lt;/controller&gt;
  </code></pre>
  
  <p>With the above general structure in the app, it is implied in the linked discussion that transclusion scope is basically inherited from parent scope(controller) and that transclusion scope cannot access the directive scope. The article explaining this is <a href="http://angular-tips.com/blog/2014/03/transclusion-and-scopes/" rel="nofollow noreferrer">http://angular-tips.com/blog/2014/03/transclusion-and-scopes/</a></p>
  
  <p>My question is - Is it possible for the transclusion scope to access the directive scope?</p>
  
  <p>according to the above article, this should be possible if we use transclude function within the link function of the directive and write code as:</p>
  
  <pre><code>transclude(scope, function(clone, scope) {
      element.append(clone);
    });
  </code></pre>
  
  <p>Does this actually work? I tried the same on my app, but it is not working. Here is the code that I have been using.</p>
  
  <p>Directive definition:</p>
  
  <pre><code>(function(){
      'use strict';
  
      angular.module('checkoutApp')
          .directive('wizardCard', ['shipToService','deliveryService','billingService', wizardCardDirective]);
  
  
      function wizardCardDirective(shipToService,deliveryService,billingService){
          return {
              restrict : 'E',
              scope : {
                 current : '@',
                 checkoutStates: '='
              },
              transclude:true,
              templateUrl: '/UsabilitySites/Cart/Checkout/app/components/shared/wizard-card.html',
              link: function(scope, element, attrs,ctrl,transclude){
  
  
                  scope.bla == "ajcnasc";
  
                  transclude(scope, function(clone, scope) {
                      element.append(clone);
                });
  
  
              }
  
          };
      }
  
  })();
  </code></pre>
  
  <p>wizard-card.html -</p>
  
  <pre><code>&lt;div class="wizardContainer"&gt;
     {{bla}}
  &lt;/div&gt;
  </code></pre>
  
  <p>scope variable scope is coming as just empty when opening the html. 
  Can someone tell me why this is happening?</p>
  
  <p><strong>THE ABOVE QUESTION WAS SOLVED
  UPDATING WITH NEW QUESTION :</strong></p>
  
  <p>Now i tried doing this with multi-slot transclusion, it is not working.</p>
  
  <p>Directive definition:</p>
  
  <pre><code>(function(){
      'use strict';
  
      angular.module('checkoutApp')
          .directive('wizardCard', [wizardCardDirective]);
  
  
      function wizardCardDirective(){
          return {
              restrict : 'E',
              scope : {
                 current : '@',
                 checkoutStates: '='
              },
              transclude: {
                  'completed': 'completed',
                  'inprogress': 'inprogress'
                },
              templateUrl: 'wizard-card.html',
              link: function(scope, element, attrs,ctrl,transclude){
  
                  scope.bla = "ajcnasc";
  
                  transclude(scope, function(clone, scope) {
                          element.append(clone);
                    });
  
  
              }
  
          };
      }
  
  })();
  </code></pre>
  
  <p>wizard-card.html - </p>
  
  <pre><code> &lt;div class="wizardContainer"&gt;
      &lt;div ng-transclude="completed"&gt;
      &lt;/div&gt;
  
      &lt;div ng-transclude="inprogress"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>directive being used - </p>
  
  <pre><code>&lt;wizard-card current="shipping" checkout-states="checkoutStates"&gt;
      &lt;completed&gt;
          bla {{bla}}
  
      &lt;/completed&gt;
  
      &lt;inprogress&gt;
          {{bla}}
      &lt;/inprogress&gt;
  
  &lt;/wizard-card&gt;
  </code></pre>
  
  <p>This is giving me an blank as well and the scope.$id is giving me another value (different from the directive).</p>
  
  <p>According to the concept, it should work the same way for multi-slot transclusion. But i cant figure out why its not working with this code.</p>