Here is an example which does the same u need to modify as per your needs.. http://jsfiddle.net/paulocoelho/fBjbP/2/
var module = angular.module('testApp', [])
.directive('test', function ($compile) {
return {
restrict: 'E',
scope: {
text: '@'
},
template: '<p ng-click="add()">{{text}}</p>',
controller: function ($scope, $element) {
$scope.add = function () {
var el = $compile("<test text='n'></test>")($scope);
$element.parent().append(el);
};
}
};
});
function crtl($scope) {}