AngularJS Live Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
<div ng-controller="InitCtrl" >
    
     <table  >
    <tr compile-data template="{{newTransaction}}">
    </tr>
</table>
</div>

JavaScript

var fessmodule = angular.module('myModule', []);

fessmodule.controller('InitCtrl', function ($http,$scope, tempService) {
       
  $scope.newTransaction = tempService();
    
  $scope.create = function () {
   
    $scope.newTransaction = tempService();
    };   
});
fessmodule.$inject = ['$http', '$scope','myTplService'];


fessmodule.directive( 'compileData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      
      var elmnt;

      attrs.$observe( 'template', function ( myTemplate ) {
        if ( angular.isDefined( myTemplate ) ) {
          // compile the provided template against the current scope
          elmnt = $compile( myTemplate )( scope );
         
            element.html(""); // dummy "clear"
      
          element.append( elmnt );
        }
      });
    }
  };
});

fessmodule.factory( 'tempService', function () {
  return function () { 
    return '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ 
            '<td contenteditable><input type="text" class="editBox" value=""/></td>'+
             '<td>'+
                '<span>'+
         '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
              '</span>'+
            '</td>';
  };
});