angularjs - Angular composite (super) directive not allowing 2 way binding on component (child) directives -

i have need create composite directive incorporates separate functional directives. 1 of component directives adds element dom , element binds value in component directive's controller. when composite directive adds component directive in compile function, seems work piece has 2 way binding in component directive not appear compiled , renders {{ctrl.value}} string on screen. realize bit convoluted have included plunk clarify issue.

 app.directive('compositedirective', function($compile){   return {     compile: compilefunction   }   function compilefunction(element, attrs){     attrs.$set("component-directive", "");     element.removeattr("composite-directive");     element.after("<div>component value when added in composite directive: {{compctrl.myvalue}}</div>");     return { post: function(scope, element){       $compile(element)(scope);     }};   } }); app.directive('componentdirective', function(){   return {     controller: "componentcontroller compctrl",     link: link   };   function link(scope, element){     element.after("<div>component value: {{compctrl.myvalue}}</div>");   } }); app.controller('componentcontroller', function(){   var vm = this;   vm.myvalue = "hello"; }); 

http://plnkr.co/edit/alo83j9efz62vtkdovgc

i don't think compilation happen result of changes in link function, unless call $compile manually, i.e.,

app.directive('componentdirective', function($compile){   return {     controller: "componentcontroller compctrl",     link: link   };   function link(scope, element){     var elm = $compile("<div>component value: {{compctrl.myvalue}}</div>")(scope);     element.append(elm);   } }); 

updated plunk: http://plnkr.co/edit/piixqujs1y6mpmkt4zxk

you can use compile function instead of link: http://plnkr.co/edit/fjzmd4fiq97ohsvetogu

also, make sure use .append() instead of .after().