Dealing with DOM Manipulations — AngularJS


When I perform DOM manipulation (add new HTML) using jQuery, AngularJS doesn’t automatically detect variables in the new HTML and replace them with their values. For example:

$scope.showSummary = function($event){



This is a simple example, but after changing the html in the element (this function was called by ng-click), the output it still “{{row}}” instead of what row should mean in the context/scope.

Any help is greatly appreciated!

Problem courtesy of: xd44


You have to inject $compile ($compile) and use it so angular knows about the new html.


However, it is frowned upon in angular to do DOM manipulation in your controllers. You want your controllers to handle business and your views to handle the view.

Try a directive to do what you want.

Solution courtesy of: Andrew Joslin

View additional discussion.