With the introduction of Angular 1.5, a new feature called angular.component was added. In this response, the term Component is used to encompass all the available tools provided by Angular, including directives, filters, and angular.component.

Let's delve into how AngularJS initializes everything:

1. Upon loading the JavaScript files, you'll notice that all angular code begins with angular.module, angular.controller, angular.directive, etc. These components are registered by passing a function as a parameter (except for angular.module, which takes a name and dependencies). However, these components are not created at this stage but merely registered.

2. Once Angular has successfully registered all modules and components, it is ready to be bootstrapped. This can be done either using the ng-app directive or manually with angular.bootstrap. Both methods require a string parameter, representing the root module. Angular then examines the dependencies deeply (forming a dependency tree) and commences loading components starting from the leaf nodes (modules without dependencies) up to the root module's components.

3. Angular follows a specific order when building each module, beginning with constants, followed by providers, configuration blocks in their registration order, values, factories/services, directives, and ultimately executing run blocks in their specified sequence (although it's advised to verify this order).

4. After setting up everything, Angular 'seals' the application, disallowing any further registrations.

The mentioned error indicates that your application is being bootstrapped twice. This issue typically arises from using both the ng-app directive and calling angular.bootstrap, or making multiple calls to angular.bootstrap.

As stated in the manual initialization section of the documentation:

You should invoke angular.bootstrap() after loading or defining your modules. It's not possible to add controllers, services, directives, etc. post-application bootstrap.

To dynamically load new controllers, ensure they are registered prior to the bootstrap process. This can be achieved by fetching necessary data from an API using tools like jQuery (as Angular isn't operational yet), executing the code within the promise returned by the request, and subsequently manually bootstrapping AngularJS with angular.bootstrap.

If you need to repeat this process, ensure the code executed through eval doesn't bootstrap Angular before registering all required components.

What is the reason behind opting for scope.$eval over the $compile service, specifically designed to compile your template string?

   link: function (scope, ele, attrs) {
      scope.$watch(attrs.html, function(html) {
        $compile(ele.contents())(scope);
      });
    }

Give this a try:

app.directive('dynamicContent', [ '$compile',
function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, elem, attrs) {
            scope.$watch(attrs.dynamicContent, function (htmlCode) {
                elem.html(htmlCode);
                $compile(elem.contents())(scope);
            });
        }
    };
}]);

To implement this directive, assign the whole string to $scope.myText in your JavaScript file, and in your HTML use

<div dynamic-content="myText"></div>

. This way, it will compile and display all contents as expected.

I have discovered a potential solution that eliminates the need to know about the controller before bootstrapping:

// Create module Foo and save $controllerProvider in a global variable
var controllerProvider = null;
angular.module('Foo', [], function($controllerProvider) {
    controllerProvider = $controllerProvider;
});
// Bootstrap Foo
angular.bootstrap($('body'), ['Foo']);

// .. time goes by ..

// Load javascript file with Ctrl controller
angular.module('Foo').controller('Ctrl', function($scope, $rootScope) {
    $scope.msg = "It works! rootScope is " + $rootScope.$id +
        ", should be " + $('body').scope().$id;
});
// Load html file with content that uses Ctrl controller
$('<div id="ctrl" ng-controller="Ctrl" ng-bind="msg">').appendTo('body');

// Manually register Ctrl controller
// If you can reference the controller function directly, just run:
// $controllerProvider.register(controllerName, controllerFunction);
// Note: I haven't found a way to get $controllerProvider at this stage
//    so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
    // Here I cannot get the controller function directly so I
    // need to loop through the module's _invokeQueue to get it
    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]);
        }
    }
}
registerController("Foo", "Ctrl");
// compile the new element
$('body').injector().invoke(function($compile, $rootScope) {
    $compile($('#ctrl'))($rootScope);
    $rootScope.$apply();
});

Fiddle. The only drawback is having to retain the $controllerProvider and utilize it in an unconventional location (after the bootstrap). Additionally, there appears to be no straightforward method to access a function used to define a controller until it is registered, necessitating looping through the module's _invokeQueue, which is not officially documented.

UPDATE: To register directives and services, rather than using $controllerProvider.register, simply use $compileProvider.directive and $provide.factory respectively. Once again, references to these must be saved in your initial module configuration.

UDPATE 2: Check out this fiddle which automates the registration of all controllers/directives/services loaded without the need for individual specifications.

When working with JavaScript, you can utilize the eval method to evaluate JS code and the $compile method to handle HTML code. I have created a plunker containing a complete test code. You can access it through the following link.

https://plnkr.co/edit/9sJw8ua1n5ItnHONwGmS