angularjs - custom directive to add ng-click then draw input element -

i have directive returning followings :

what trying here :

1- add click event .

2-this click draw input field ,

so far , ng-click being added dom doesn't call add function, can see tried use compile whole element gone when used

what doing wrong ?

return {      link: function($scope, element, attrs) {       $scope.add = add;       $scope.remove = remove;       el = element.attr('ng-click', 'add()');       // $compile(el);      function add(){         console.log("inside addinput<<<<<<")         var element =  '<div>\             <input type="text"/>\             <button ng-click="remove()">save</button>\             <button ng-click="remove()">close</button>\             </div>';         newelement = $compile(newelement)($scope);         element.append(newelement)       }       function remove(){         newelement.remove();       }     } } 

this not work :

 el = element.attr('ng-click', 'add()'); 

(you use compile function this. it's link function too-late phase that)

you should instead :

   el .on('click', add); 

also should move implementation of add controller ( or scope)