title: Using ng-switch in directive with transclude
body: <p>I am trying to create a template that shows some transcluded content. When I use ng-show everything works fine, but using ng-if or ng-switch gives me problems. I get this error message: Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found</p>
  
  <p>I understand that ng-switch creates a new scope. But the transclude should still go up to the parent chain. Is this a defect in angularjs? See <a href="http://jsfiddle.net/HgvP7/" rel="nofollow">http://jsfiddle.net/HgvP7/</a></p>
  
  <p>Here is my html, modified from the documentation example:
  </p>
  
  <pre><code>&lt;div ng-app="docsTransclusionExample"&gt;
    &lt;div ng-controller="Ctrl"&gt;
      &lt;my-dialog&gt;Check out the contents, {{name}}!&lt;/my-dialog&gt;
    &lt;/div&gt;
  
  
    &lt;!-- my-dialog.html --&gt;
    &lt;script type="text/ng-template" id="my-dialog.html"&gt;
      &lt;div ng-switch="1+1"&gt;
          &lt;div ng-switch-when="2"&gt;
              &lt;div ng-transclude&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the code:
  </p>
  
  <pre><code>angular.module('docsTransclusionExample', [])
    .controller('Ctrl', function($scope) {
      $scope.name = 'Tobias';
    })
    .directive('myDialog', function() {
      return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'my-dialog.html',
        link: function (scope, element) {
          scope.name = 'Jeff';
        }
      };
    });
  </code></pre>