title: nested directive throws Error: [$compile:multidir]
body: <p>I have a very simple nested directive that just simply throws an error.  I can call the base-directive without error, but when I add my-directive which calls base-directive I get the error. </p>
  
  <pre><code>&lt;div ng-controller="MainController"&gt;
      &lt;base-directive&gt;This is the base directive&lt;/base-directive&gt; 
      &lt;my-directive&gt;this is my directive&lt;/my-directive&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/ZDKNj0Ki4mRgudmTTUAP" rel="nofollow">http://plnkr.co/edit/ZDKNj0Ki4mRgudmTTUAP</a></p>
  
  <pre><code>angular.module('MyApp', [])
      .directive('baseDirective', function() {
          return {
              restrict: 'E',
              replace: true,
              transclude: true,
              template   : '&lt;div&gt;base-directive:transclusion=&lt;ng-transclude&gt;&lt;/ng-transclude&gt;&lt;/div&gt;'
          };
      })
      .directive('myDirective', function() {
          return {
              restrict: 'E',
              replace: true,       
              transclude:true,
              template   : '&lt;base-directive&gt;&lt;ng-transclude&gt;&lt;/ng-transclude&gt;&lt;/base-directive&gt;'
          }
      })
      .controller('MainController', ['$scope', function($scope) {
        }])
  </code></pre>
  
  <p>Here's the error:</p>
  
  <p>Error: [$compile:multidir] Multiple directives [myDirective, baseDirective] asking for transclusion on: 
  <a href="http://errors.angularjs.org/1.4.0-beta.5/" rel="nofollow">http://errors.angularjs.org/1.4.0-beta.5/</a>$compile/multidir?p0=myDirective&amp;p1=baseDirective&amp;p2=transclusion&amp;p3=%3Cbase-directive%3E
      at REGEX_STRING_REGEXP (angular.js:68)
      at assertNoDuplicate (angular.js:8065)
      at applyDirectivesToNode (angular.js:7480)
      at compileNodes (angular.js:7117)
      at compileNodes (angular.js:7129)
      at compileNodes (angular.js:7129)
      at compile (angular.js:7024)
      at angular.js:1519
      at Scope.$get.Scope.$eval (angular.js:15236)
      at Scope.$get.Scope.$apply (angular.js:15335)</p>
  
  <p><strong>What I'm trying to do:</strong></p>
  
  <p>I was hoping to create a few base directives that present a portion of the UI, and some higher level directives that call these base directives to build a complete "widget".   </p>
  
  <h1>Update 1 - without multiple transclusion</h1>
  
  <p>As suggested by @Claies, I cannot have multiple transclusions, but it must be more than that, because even with this version where I pass in the text, and only have transclusion in base, I get the error:</p>
  
  <pre><code>.directive('myDirective', function() {
      return {
          restrict: 'E',
          replace: true,       
          scope: {
            text: '@' 
          },
          template   : '&lt;base-directive&gt;{{text}}&lt;/base-directive&gt;'
      }
  })
  .controller('MainController', ['$scope', function($scope) {
    }])
  
  &lt;div ng-controller="MainController"&gt;
      &lt;base-directive&gt;This is the base directive&lt;/base-directive&gt; 
      &lt;my-directive text="this is my directive"&gt;&lt;/my-directive&gt; 
  &lt;/div&gt;
  
  Error: [$compile:multidir] Multiple directives [myDirective, baseDirective] asking for template on: &lt;base-directive text="this is my directive"&gt;
  </code></pre>