title: TypeError: Cannot read property 'childNodes' of undefined in AngularJS directive
body: <p>I am making a directive &quot;Tab Slide Out&quot; in AngularJS like this</p>
  <pre><code>angular.module('myApp',[]).directive('tabSlideOut', [&quot;$window&quot;, &quot;$document&quot;, &quot;$timeout&quot;, function($window, $document, $timeout) {
      // default settings of a regular tab slide out
      var defaultSettings = {
          speed: 300,
          action: 'click',
          tabLocation: 'left',
          top: '200px',
          left: '50px',
          fixedPosition: true,
          positioning: 'absolute',
          onLoadSlideOut: false
      }
  
      // handler element
      var handler = angular.element('&lt;a class=&quot;handler btn&quot;&gt;{{title}}&lt;/a&gt;');
  
      // panel element aka container
      var container = angular.element('&lt;div ng-transclude&gt;&lt;/div&gt;');
  
      return {
          restrict: 'E',
          transclude: true,
          replace: true,
          template: '&lt;div class=&quot;tab-slide-out&quot;&gt;&lt;/div&gt;',
          scope: {
              options: &quot;=&quot;,
              status: &quot;=&quot;,
              title: &quot;@&quot;
          },
          compile: function(template) {
  
              // append handler to template
              template.append(handler);
  
              // append container to template
              template.append(container);
  
              console.log(template);
              // return linking function
              return function(scope, element, attrs) {
                 ...
              }
          }
          
      };
  </code></pre>
  <p>If I use only one, everything works fine. However, if I use 2 or more, it will throw this error
  <strong>TypeError: Cannot read property 'childNodes' of undefined</strong></p>
  <p>Here is the plunker link
  <a href="http://plnkr.co/edit/YWtsUsyX3vsg1l7kv7M2?p=preview" rel="nofollow noreferrer">Demo</a></p>