angularjs - implement a new directive already compiled template -

as know, compilation passes once , not repeat. if have controller example

<div ng-controller="somecontr"></div> 

, create

<span>{{ text }}</span> 

in controller, , put there item using appendchild () method, or realties

<div ng-controller="somecontr"> <span>{{ text }}</span> </div> 

question, how can make work expression {{ text}}

first , 1 of important things understand: don't manipulate dom in controllers, put dom manipulation staff directives , let controllers care of model (scope). in order add dom elements dynamically in directive can use $compile service (see usage section) same job if put string part of template:

html

<div app-directive ng-init="text = 'hello world'"></div> 

javascript

angular.module('app',[]).   directive('appdirective', function($compile) {     return {       link: function(scope, element) {         var html = '<span>{{text}}</span>';         element.append($compile(html)(scope));       }     }   }); 

plunker: http://plnkr.co/edit/dybamvqescnitrwjkt13?p=preview