声明后如何运行由DOM添加的指令？

Question

I want to add DOM after declaring a directive, but does not work for a future use. Please, check my code :

http://jsfiddle.net/uh99z0uL/1/

angular.element(document).ready(function(){
    angular.bootstrap(document, ["MyApp"]);
});

var MyApp = angular.module("MyApp", []);
MyApp.directive('user', function($rootScope){
    var directive = {};
    directive.restrict = 'E';
    directive.template = "I'm {{name}}!";
    directive.controller = function($scope){
        //$scope.name = "Jack";
    };
    directive.scope = {
        name: '@'
    };
    directive.compile = function($element, attributes) {
        $element.addClass("show");
        return function($scope, $element, attributes) {
        };
    };
    return directive;
});

//This works...
angular.element(document.documentElement).append('<user name="Jack" />'); //ok 

//Now I want to run the same but adding the DOM after declaring the directive
setTimeout(function(){
    angular.element(document.documentElement).append('<user name="Carl" />'); //no
    //not working...
},2000);

It would be possible that these new elements may run the directive after have been declared?. Thanks brothers.

Answer 1

you have to use $compile before appending

 angular.element(document.documentElement).append($compile('<user name="Carl" />')($scope));

http://jsfiddle.net/codingninja/amch7rpy/2/