Utilizing bootstrap() in AngularJS triggers the AngularJS compiler, similar to how ng-app works.

// Creating module Foo
angular.module('Foo', []);
// Defining controller Ctrl within module Foo
angular.module('Foo').controller('Ctrl', function($scope) { 
    $scope.name = 'DeathCarrot' });
// Adding an element that utilizes controller Ctrl
$('<div ng-controller="Ctrl">{{name}}</div>').appendTo('body');
// Initializing with Foo
angular.bootstrap($('body'), ['Foo']);

Fiddle.

For those looking to streamline module registration and dynamic loading within an AngularJS application, I recommend exploring the functionalities of the ocLazyLoad library. This library allows for on-the-fly registration of modules, controllers, services, etc., seamlessly integrating with requireJs or similar libraries for efficient loading.

For a project requiring the addition of multiple views and binding them to controllers at runtime from a JavaScript function outside the AngularJS context, I developed the following solution:

<div id="mController" ng-controller="mainController">
</div>

<div id="ee">
  The second controller's view should be rendered here.
</div>

By calling setCnt() function, the HTML content is injected and compiled, linking it to the second controller:

var app = angular.module('app', []);

function setCnt() {
  // Injecting the view's html
  var e1 = angular.element(document.getElementById("ee"));
  e1.html('<div ng-controller="ctl2">my name: {{name}}</div>');

  // Compile controller 2 html
  var mController = angular.element(document.getElementById("mController"));
  mController.scope().activateView(e1);
}

app.controller("mainController", function($scope, $compile) {
  $scope.name = "this is name 1";

  $scope.activateView = function(ele) {
    $compile(ele.contents())($scope);
    $scope.$apply();
  };
});

app.controller("ctl2", function($scope) {
  $scope.name = "this is name 2";
});

To see this in action, check out the example here:

I hope this explanation proves helpful.

After making enhancements to the code originally written by Jussi-Kosunen, I have managed to simplify the process so that everything can now be executed with just one function call.

function registerController(moduleName, controllerName, template, container) {
    // Adding html content using Ctrl controller
    $(template).appendTo(container);
    // To access the controller function, looping through the module's _invokeQueue is necessary
    var queue = angular.module(moduleName)._invokeQueue;
    for(var i=0;i<queue.length;i++) {
        var call = queue[i];
        if(call[0] == "$controllerProvider" &&
            call[1] == "register" &&
            call[2][0] == controllerName) {
                controllerProvider.register(controllerName, call[2][1]);
            }
        }

        angular.injector(['ng', 'Foo']).invoke(function($compile, $rootScope) {
            $compile($('#ctrl'+controllerName))($rootScope);
            $rootScope.$apply();
        });
}

This approach allows you to load templates from various sources and create controllers programmatically, including nested ones.

For a demonstration of loading a controller within another controller, refer to this live example: http://plnkr.co/edit/x3G38bi7iqtXKSDE09pN

Why not utilize config and ui-router for dynamic loading?

With this approach, you can keep your controllers separate from the HTML code.

Here is an example implementation:

var configuration = {
    config: function(){
        mainApp.config(function ($stateProvider, $urlRouterProvider){
            $urlRouterProvider.otherwise("/");
            $stateProvider

            .state('index',{
                views:{
                    'main':{
                        controller: 'PublicController',
                        templateUrl: 'templates/public-index.html'
                    }
                }
            })
            .state('public',{
                url: '/',
                parent: 'index',
                views: {
                    'logo' : {templateUrl:'modules/header/views/logo.html'},
                    'title':{
                        controller: 'HeaderController',
                        templateUrl: 'modules/header/views/title.html'
                    },
                    'topmenu': {
                        controller: 'TopMenuController',
                        templateUrl: 'modules/header/views/topmenu.html'
                    },
                    'apartments': {
                        controller: 'FreeAptController',
                        templateUrl:'modules/free_apt/views/apartments.html'
                    },
                    'appointments': {
                        controller: 'AppointmentsController',
                        templateUrl:'modules/appointments/views/frm_appointments.html'
                    },
                }
            })
            .state('inside',{
                views:{
                    'main':{
                        controller: 'InsideController',
                        templateUrl: 'templates/inside-index.html'
                    },
                },
                resolve: {
                    factory:checkRouting
                }
            })
            .state('logged', {
                url:'/inside',
                parent: 'inside',
                views:{        
                    'logo': {templateUrl: 'modules/inside/views/logo.html'},
                    'title':{templateUrl:'modules/inside/views/title.html'},
                    'topmenu': {
                       // controller: 'InsideTopMenuController',
                        templateUrl: 'modules/inside/views/topmenu.html'
                    },
                    'messages': {
                        controller: 'MessagesController',
                        templateUrl: 'modules/inside/modules/messages/views/initial-view-messages.html'
                    },
                    'requests': {
                        //controller: 'RequestsController',
                        //templateUrl: 'modules/inside/modules/requests/views/initial-view-requests.html'
                    },

                }

            })

    });
},

};

In this process, I utilized two components - ng-controller along with its scope defined function and the $controller service to generate a dynamic controller.

Initially, in the HTML section, we establish a Static Controller that will create a dynamic controller.

<div ng-controller='staticCtrl'>
  <div ng-controller='dynamicCtrl'>
    {{ dynamicStuff }}
  </div>
</div>

The 'staticCtrl' static controller defines a scope member known as 'dynamicCtrl', which is used to instantiate the dynamic controller. The ng-controller either takes an existing controller by name or searches the current scope for a function with the same name.

.controller('staticCtrl', ['$scope', '$controller', function($scope, $controller) {
  $scope.dynamicCtrl = function() {
    var fn = eval('(function ($scope, $rootScope) { alert("I am dynamic, my $scope.$id = " + $scope.$id + ", $rootScope.$id = " + $rootScope.$id); })');
    return $controller(fn, { $scope: $scope.$new() }).constructor;
  }
}])

The technique involves using eval() to evaluate a string (our dynamic code from any source) and then employing the $controller service. This service can handle a predefined controller name or a function constructor typically followed by constructor parameters (in our case, a new scope). Within the function, Angular injects variables like $scope and $rootScope based on our request.

'use strict';

var mainApp = angular.module('mainApp', [
    'ui.router', 
    'ui.bootstrap', 
    'ui.grid',
    'ui.grid.edit',
    'ngAnimate',
    'headerModule', 
    'galleryModule', 
    'appointmentsModule', 
 ]);


(function(){

    var App = {
        setControllers:   mainApp.controller(controllers),
        config:   config.config(),
        factories: {
            authFactory: factories.auth(),
            signupFactory: factories.signup(),
            someRequestFactory: factories.saveSomeRequest(),
        },
        controllers: {
            LoginController: controllers.userLogin(),
            SignupController: controllers.signup(),
            WhateverController: controllers.doWhatever(),
        },
        directives: {
            signup: directives.signup(), // add new user
            openLogin: directives.openLogin(), // opens login window
            closeModal: directives.modalClose(), // close modal window
            ngFileSelect: directives.fileSelect(),
            ngFileDropAvailable: directives.fileDropAvailable(),
            ngFileDrop: directives.fileDrop()
        },
        services: {
           $upload: services.uploadFiles(),
        }
    };
})();

This is just a demonstration of how the code can be organized in AngularJS.

By using this structure, there's no need to explicitly define ng-controller="someController" in the HTML elements, just include <body ng-app="mainApp">

The same approach can be applied to different modules or sub-modules within a project.