How to add a new module dynamically?

Question

Image that I have the following .js code:

 $.ajax({
     url: 'some/url',
     success: function(result) {
        $activeTabContainer.html(result);
    }
 });

The $activeTabContainer is jQuery selected div.

The result object contains html (with script tag), maybe something like:

<div ng-app="mySpa">
    <div ng-controller="myController"></div>
</div>

And later in the same .html file a script tag, which contains:

(function () {
    "use strict";
    var app = angular.module("mySpa", []);
    app.controller("myController", [function () {
        debugger;
    }]);
})();

It perfectly executes the .js part in the script tag, but I guess that angular must be somehow notified about the dynamically added module and its controllers, something like dynamically bootstrapping.

Do anyone have an idea?

Answer 1

I found the solution, it happens because angular does not bootstrap automatically, when a new module is added dynamically. You need to bootstrap it manually:

angular.bootstrap(document, ["mySpa"]);

And bingo it works :-)

Link to the documentation: https://docs.angularjs.org/api/ng/function/angular.bootstrap