Dynamic content added with AngularJS click event not working on the added content

Question

I just started on AngularJS this week for a new project, and I have to come up to speed ASAP.

One of my requirements, is to add html content dynamically and that content might have a click event on it.

So the code Angular code I have below displays a button, and when clicked, it dynamically adds another button. Clicking on the dynamically added buttons, should add another button, but I cannot get the ng-click to work on the dynamically added buttons

<button type="button" id="btn1" ng-click="addButton()">Click Me</button>

The working code sample is here http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

Answer 1

app.controller('MainCtrl', function($scope,$compile) {

    var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
    var temp = $compile(btnhtml)($scope);

    //Let's say you have element with id 'foo' in which you want to create a button
    angular.element(document.getElementById('foo')).append(temp);

   var addButton = function(){
       alert('Yes Click working at dynamically added element');
   }

});

you need to add $compile service here, that will bind the angular directives like ng-click to your controller scope. and dont forget to add $compile dependency in your controller as well like below.

here is the plunker demo