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

by 
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

More Related Contents:

  1. Adding parameter to ng-click function inside ng-repeat doesn’t seem to work
  2. Ng-click doesn’t work inside ng-repeat
  3. AngularJS – how to override directive ngClick
  4. How/when to use ng-click to call a route?
  5. Angular ng-click event delegation
  6. How to add custom validation to an AngularJS form?
  7. How to use a filter in a controller?
  8. CORS with spring-boot and angularjs not working
  9. Angular.js directive dynamic templateURL
  10. Using protractor with loops
  11. Angularjs $q.all
  12. passing 2 $index values within nested ng-repeat
  13. Should I use `this` or `$scope`?
  14. AngularJS $http, CORS and http authentication
  15. How to format a date using ng-model?
  16. How can I define my controller using TypeScript?
  17. How to write a debounce service in AngularJS
  18. $provide outside config blocks
  19. Angularjs wrong $index after orderBy
  20. How to read binary data in AngularJS in an ArrayBuffer?
  21. Adding http headers to window.location.href in Angular app
  22. What are the differences between ng-repeat and ng-options and why do they not behave the same way?
  23. Angularjs ng-options using number for model does not select initial value
  24. Typescript async/await doesnt update AngularJS view
  25. How do I enable Webstorm intellisense for AngularJS when writing CoffeeScript
  26. Npm start issues in AngularJS phonecat application
  27. angularjs ui-router – how to build master state which is global across app
  28. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  29. How to use the axios library with AngularJS
  30. Angularjs – Hide content until DOM loaded

Leave a Comment