element.replaceWith not working as expected in AngularJS Directive when the model is updated -

so have array objects:

var columns= [{label:"column 1",value:"val 1"},{label:"column 2",value:"val 2"}]; 

i have directive attribute of table data element.

<td ng-repeat="column in columns" my-directibe column="column.label", value="column.value"> 

this directive:

    .directive("queryresult", function ($compile) {     return {       scope: {         value:"=",         column:"="       },       restrict: "ae",       link:function(scope,elemnt){         var tabledata=angular.element('<td ng-bind="value"></td>');         elemnt.replacewith($compile(tabledata)(scope))       }     }   }) 

the expected result should , it's like:

<td class="ng-scope">val 1</td> 

the problem comes when add additional result array , array becomes 3 elements. works last added element first 2 elements it's like:

<td query-result ng-repeat="column in columns" value="value" column="column" class="ng-scope ng-isolate-scope"></td> <td class="ng-scope">val 1</td>  <td query-result ng-repeat="column in columns" value="value" column="column" class="ng-scope ng-isolate-scope"></td> <td class="ng-scope">val 2</td>  <td class="ng-scope">val 3</td> 

so these additional td creates additional columns blank values , whole table goes wrong.

as far know, elemnt.replacewith execute once, binding not work @ all.

try this:

return {   scope: {     value:"=",     column:"="   },   restrict: "ae",   link:function(scope,elemnt){     var tabledata=angular.element('<td ng-bind="value"></td>');     scope.$watch('value', function() {         elemnt.replacewith($compile(tabledata)(scope));     });   } }