title: Use an angular directive inside another directive
body: <p>I have created the below angular directives, <strong>ChildDirective</strong> that is used inside <strong>ParentDirective</strong></p>
  
  <pre><code>var wizardModule = angular.module('Wizard', []);
  
  wizardModule.directive('childDirective', function ($http, $templateCache, $compile, $parse) {
  return {
      restrict: 'E',
      scope: [],
      compile: function (iElement, iAttrs, transclude) {
          iElement.append('child directive&lt;br /&gt;');
      }
  }
  })
  
  wizardModule.directive('parentDirective', function ($http, $compile) {
  return {
      restrict: 'E',
      compile: function (element, attrs) {
          var x = '&lt;child-directive&gt;&lt;/child-directive&gt;&lt;child-directive&gt;&lt;/child-directive&gt;';
          element.append(x);
      }
  }
  </code></pre>
  
  <p>This was working normally and several child directives appeared.</p>
  
  <p>I wanted to update the <strong>ParentDirective</strong>, to get the list of <strong>childDirectives</strong> from the server. Hence I updated the <strong>ParentDirective</strong> code to do an ajax call and then draw the <strong>ChildDirectives</strong></p>
  
  <pre><code>var elem;
  wizardModule.directive('parentDirective', function ($http, $compile) {
  return {
      restrict: 'E',
      compile: function (element, attrs) {
          var controllerurl = attrs.controllerurl;
          elem = element;
  
          if (controllerurl) {
              $http.get(controllerurl + '/GetWizardItems').
              success(function (data, status, headers, config) {
                  var x = '&lt;child-directive&gt;&lt;/child-directive&gt;&lt;child-directive&gt;&lt;/child-directive&gt;';
                  elem.append(x);
                  $compile(x);
              });
          }
      }
  }
  });
  </code></pre>
  
  <p>The problem is that the <strong>childDirectives</strong> does not appear any more, although in the debeggur it is entering to the compile method of the <strong>childDirective</strong></p>