title: angularjs directive - transclude non working as expected
body: <p>I'm writing a submenu directive, but I'm unable to use transclude properly for some reason. I've read and watched some videos, but it still doesn't work on my app and I can't figure out why.</p>
  
  <p>Here's how I call the directive:</p>
  
  <pre><code>&lt;my-submenu&gt;
    &lt;div ng-click="test()"&gt;Test&lt;/div&gt;
    &lt;div ng-click="test2()"&gt;Test 2&lt;/div&gt;
    &lt;div ng-click="test3(id, type)"&gt;Test 3&lt;/div&gt;
    &lt;div ui-sref="test ({id: id})"&gt;Test 4&lt;/div&gt; 
  &lt;/my-submenu&gt;
  </code></pre>
  
  <p>and the directive js is:</p>
  
  <pre><code>  {
      link: linkFunction,
      restrict: 'E',
      replace: true,
      transclude: true,
      templateUrl: './directives/submenu.tpl.html'
    }
  </code></pre>
  
  <p>and the directive template is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;!-- Menu Icon --&gt;
      &lt;div class="icon ion-plus"&gt;&lt;/div&gt;
      &lt;!-- Menu --&gt;
      &lt;div&gt;
          &lt;div ng-transclude&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I though that using transclude and telling the directive template where to transclude, I should be able to add content to the directive template as well as content where I call if from my parent, and have it compiled togheter, but it is not doing that.</p>
  
  <p>The resulting compiled code is the following:</p>
  
  <pre><code>&lt;my-submenu&gt;
   &lt;div&gt;
    &lt;div ng-click="test()"&gt;Test&lt;/li&gt;
    &lt;div ng-click="test2()"&gt;Test 2&lt;/li&gt;
    &lt;div ng-click="test3(id, type)"&gt;Test 3&lt;/li&gt;
    &lt;div ui-sref="test ({id: id})"&gt;Test 4&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/my-submenu&gt;
  </code></pre>
  
  <p>and as you can see, the Icon before the transclude is gone and not displayed at all. Why?</p>
  
  <p>What am I doing wrong with the transclude? thanks</p>