ng-click not working when using append function

Issue

I am trying to call a function using ng-click when dynamical elements are created but with no success so far. Here is my code

$scope.myfunc = function(){
    alert("anything")
}

var divtoappend=angular.element( document.querySelector('#slist'));
divtoappend.append("<button class = 'optv' ng-click='myfunc()'>" +mybutton+ "</button>");
...

No error is thrown and nothing happens on click

Solution

You have to compile DOM with $compile API, before injecting into DOM tree, like below.

divtoappend.append($compile("<button class = 'optv' ng-click='myfunc()'>" +mybutton+ "</button>")($scope));

By compiling DOM angular will put all HTML level bindings in $$watchers array of $scope to make sure UI is up to date on every digest cycle.

Answered By - Pankaj Parkar