title: Angular directive - asking for transclusion?
body: <p>I get an error below and I don't understand why. Any ideas?</p>
  
  <p>html,</p>
  
  <pre><code>&lt;button ng-click="loadForm()"&gt;Load Directive Form&lt;/button&gt;
  &lt;div data-my-form&gt;&lt;/div&gt;
  </code></pre>
  
  <p>angular,</p>
  
  <pre><code>   app.directive('myForm', function() {
          return {
            replace:true,
            controller:function($scope){
              $scope.isLoaded = false;
              $scope.loadForm = function(){
                $scope.isLoaded = true;
              }
            },
            template: '&lt;div ng-if="isLoaded" ng-include="\'form.php\'" &gt;&lt;/div&gt;',
            link:function(scope, element) {
  
            }
          }
      });
  </code></pre>
  
  <p>error,</p>
  
  <pre><code>Error: [$compile:multidir] Multiple directives [ngInclude, ngInclude] asking for transclusion on: &lt;div data-my-form="" ng-if="isLoaded" ng-include="'form.php'"&gt;
  </code></pre>
  
  <p>a fix,</p>
  
  <pre><code>'&lt;div&gt;&lt;div ng-if="isLoaded" ng-include="\'form.php\'" &gt;&lt;/div&gt;&lt;/div&gt;'
  </code></pre>
  
  <p>but why do I have to <strong>wrap</strong> it in a div? is it a angular bug?</p>