title: Isoleted scope also for transclude?
body: <p>I want to add my custom directive within my other directive.
  Second directive should use scope from first directive.
  Problem is that first directive has isolated scope and apperently it is also isolated for second directive and in my opinion it shouldn't because I'm using transclude.</p>
  
  <p>Here is example. When I comment <code>scope: {test:"@"}</code> all wroks as it should.
  How to fix it? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("myApp", [])
              .controller("initCtrl", function ($scope) {
  
              });
      angular.module('myApp')
              .directive('firstDirective', ['$timeout', function ($timeout) {
                  return {
                      restrict: 'E',
                      scope: {test: "@"}, //everything is OK when I comment that.
                      transclude: true,
                      template: '&lt;div&gt; First Directive {{myVar}} {{test}}&lt;div ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;',
                      controller: "firstDirectiveCtrl",
                      link: function (scope, element, attributes) {
  
                      }
                  };
              }])
              .controller("firstDirectiveCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
                  $scope.myVar = "Var from first directive";
                  $timeout(function () {
                      $scope.myVar = "Var from first directive has changed";
                  }, 1000);
              }])
              .directive('secondDirective', [function () {
                  return {
                      restrict: 'E',
                      scope: false,
                      require: "^firstDirective",
                      template: '&lt;div&gt; Second Directive {{myVar}}&lt;/div&gt;',
                      link: function (scope, element, attributes) {
                          //scope.myVar = "Var from second directive";
                      }
                  };
              }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="myApp"&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div ng-controller="initCtrl" class="container"&gt;
      &lt;first-directive test="test"&gt;
          &lt;second-directive&gt;&lt;/second-directive&gt;
          {{myVar}} 
  &lt;br&gt;&lt;i&gt;no var unless I comment scope: {test:"@"} i first directive.&lt;/i&gt;
      &lt;/first-directive&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>