angularjs - dynamically adding angular directive in custom directive is not working -

using custom directive move ng-model root directive child input element. reason model not working on child element. here code

markup:

<span usinglink ng-model="test">       <input type="checkbox"  value="test" />       <span>{{test}}</span>     </span> 

directive:

mymodule.directive('usinglink', function($compile){         return{           link : function(scope, element, attrs){                element.children('input').attr('ng-model',element.attr('ng-model'));               }         }       }); 

this exact thing works when use compile instead of link. can tell reason behavior , way can achieve behavior using link.

omwmodule.directive('prngdropdown', function ($compile) {         return {             compile : function (element, attributes) {                 var selectelement = element;                 if (element.attr("ng-model") != undefined) {                              element.attr("ng-init", element.attr("ng-model") + "= '" + element.val() + "'");                 }                 //'removing directive after logic.as  custom directive placed on same element. compile create infinit loop                  //selectelement.removeattr("pr-ng-dropdown");                 //$compile(selectelement.parent())(scope);              }         }     }); 

for reason ng-init not updating model.can please explain missing.

manually writting html (which element.attr(val) does) not processed angular. processed , updated, html need compiled angular, happens when put code in compile phase.

if want work in link phase, need manually compile resulting html watchers set , bindings bound.

var input = element.children('input');  input.attr('ng-model',element.attr('ng-model')); $compile( input )($scope);