javascript - Directives like ng-click, ng-onmoseover are not working in child elements generated in Angular's controller -

i new anglarjs. problem description :-

my html -

<div ng-controller="samplectrl">     <div id="wrapperelement"></div> </div> 

angular controller - (not working)

app.controller('samplectrl', ['$scope', function($scope) {     var nodedivtag = '<div ng-click="samplefunction()">click me</div>';     $("#wrapperelement").append(nodedivtag);      $scope.samplefunction = function(){         alert("costom message");     }; }]); 

angular controller - (working)

app.controller('samplectrl', ['$scope', function($scope) {     var nodedivtag = '<div onclick="samplefunction()">click me</div>';     $("#wrapperelement").append(nodedivtag);      samplefunction = function(){         alert("costom message");     }; }]); 

ng-click not working when appending child element in controller. onclick working @ same place. ng-click working when using in wrapperelement

<div ng-controller="samplectrl">     <div id="wrapperelement" ng-click="samplefunction()"></div> </div> 

and controller used not working one. can me out here how use ng-click in appended child element or why not working in case.

you need use $compile compile element prior adding dom. (not tested)

app.controller('samplectrl', ['$scope', '$compile', function($scope, $compile) {     var nodedivtag = $compile('<div ng-click="samplefunction()">click me</div>')($scope);     $("#wrapperelement").append(nodedivtag);      samplefunction = function(){         alert("costom message");     }; }]);