javascript - Adding a directive to the DOM after Angular bootstrap -

i´m trying add directives dom after angular has bootstrapped. if in run block works, if add delay directive not shown. check out fiddle can see mean: https://jsfiddle.net/wlddmctp/

var app = angular.module("myapp", ["docssimpledirective"]);  app.run(function ($timeout) {      $timeout(function () {         var container = document.getelementbyid("container");         var box = document.createelement("div");         box.innerhtml = "<div my-customer></div>";         container.appendchild(box);     }, 3000); }); 

can explain whats reason this, , how solve problem?

thanks

you need compile new html manually, because if use in timeout angular has finished parsing , rendering.

so need use $compile service correct scope.

var scope = angular.element(container).scope(); $compile(box)(scope); 

demo: https://jsfiddle.net/wlddmctp/1/

that being said, can see code becomes little clumsy such usage of $compile , getting proper element scope. recommend use custom service/directive dynamic injection of html, run block not ideal place this.