angularjs - How to append a custom angular directive into another custom angular directive? -

i have 2 custom angular directives , 1 appends second repeatedly. problem although tag appended, template of directive not. when manually put in, works.

see jsfiddle: http://jsfiddle.net/hb7lu/5555/

here code appending takes place:

myapp.directive('formlist', function () {     return {         template: '<my-form></my-form>',         require:'^repeatableform',         restrict: 'e',         link: function (scope, element, attrs, repeatableformctrl) {             scope.add = function () {                 console.log("test");                 element.append('appended <my-form></my-form>'); // apended<my-form></my-form> appear not contents of <my-form>             };         }     }; }); 

you have use $compile service manually compile my-form directive this:

myapp.directive('formlist', function ($compile) {     return {         template: '<my-form></my-form>',         require:'^repeatableform',         restrict: 'e',         link: function (scope, element, attrs, repeatableformctrl) {             scope.add = function () {                 console.log("test");                 var newform = $compile('<span>appended </span><my-form></my-form>')(scope);                 element.append(newform);             };         }     }; }); 

example jsfiddle: http://jsfiddle.net/9l3whcqc/