 <p><em>You can use <code>angular.bootstrap()</code> directly...</em> the problem is you lose the benefits of directives.</p> <p>First you need to get a reference to the HTML element in order to bootstrap it, which means your code is now coupled to your HTML.</p> <p>Secondly the association between the two is not as apparent. With <code>ngApp</code> you can clearly see what HTML is associated with what module and you know where to look for that information. But <code>angular.bootstrap()</code> could be invoked from anywhere in your code.</p> <p>If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called <code>ngModule</code>. Here is what your code would look like using it:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="angular.js"&gt;&lt;/script&gt; &lt;script src="angular.ng-modules.js"&gt;&lt;/script&gt; &lt;script&gt; var moduleA = angular.module("MyModuleA", []); moduleA.controller("MyControllerA", function($scope) { $scope.name = "Bob A"; }); var moduleB = angular.module("MyModuleB", []); moduleB.controller("MyControllerB", function($scope) { $scope.name = "Steve B"; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-modules="MyModuleA, MyModuleB"&gt; &lt;h1&gt;Module A, B&lt;/h1&gt; &lt;div ng-controller="MyControllerA"&gt; {{name}} &lt;/div&gt; &lt;div ng-controller="MyControllerB"&gt; {{name}} &lt;/div&gt; &lt;/div&gt; &lt;div ng-module="MyModuleB"&gt; &lt;h1&gt;Just Module B&lt;/h1&gt; &lt;div ng-controller="MyControllerB"&gt; {{name}} &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>You can get the source code for it at:</p> <p><a href="http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/">http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/</a></p> <p>It's implemented in the same way as <code>ngApp</code>. It simply calls <code>angular.bootstrap()</code> behind the scenes.</p>