angularjs - 別のディレクティブ内で angular ディレクティブを使用する

Question

以下のAngularディレクティブ、ParentDirective内で使用されるChildDirectiveを作成しました

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<br />');
    }
}
})

wizardModule.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var x = '<child-directive></child-directive><child-directive></child-directive>';
        element.append(x);
    }
}

これは正常に機能し、いくつかの子ディレクティブが表示されました。

サーバーからchildDirectivesのリストを取得するために、 ParentDirectiveを更新したかったのです。したがって、 ParentDirectiveコードを更新して ajax 呼び出しを行い、ChildDirectivesを描画します。

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 = '<child-directive></child-directive><child-directive></child-directive>';
                elem.append(x);
                $compile(x);
            });
        }
    }
}
});

問題は、debeggurでは childDirective の compile メソッドに入っていますが、childDirective が表示されなくなったことです。