jquery - Compile angular controller inserted by javascript dynamically?

Question

Im working in an app that creates html dynamically. We started using angular so now we are trying to create html using angular.element() and defining a controller in it.

angular.element("<div ng-controller='myController'/>");

The problem is, that as it is created after the page renders (when an user clicks somewhere, for example), the html inserted is not working with angular, is like plain html. How can I solve it?

Answer 1

I use this way:

var template = angular.element(YOU_HTML_IN_STRING);
var linkFn = $compile(template);
var element = linkFn($scope);
angular.element(CSS_SELECTOR).html('').append(element); 

If you don't have access to $compile. You can have a look here: how can we use $compile outside a directive in Angularjs