Angular add modules after angular.bootstrap

Initially Create your module:

angular.module('app.controllers', []);

angular.module('app').requires.push('app.controllers');

To assign controller Provider to the replacing module’s controller method: 

var myApp = angular.module('myApp', []);
 
//note overriding controller method might be a little controversial :D
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
  var backup = myApp.controller;
  myApp.controller = $controllerProvider.register;
  myApp.controller.legacy = backup;
})
 
myApp.run(function ($rootScope, $compile) {
 
  myApp.controller('MyCtrl', function($scope) {
    $scope.name = 'Superhero';
  })
 
  var elem;
  var scope=$rootScope;
  elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
    console.log('newly created element', clonedElement[0])
    document.body.appendChild(clonedElement[0]);
  });
  console.log('You can access original register via', myApp.controller.legacy);
})

Try this answer,

    It works to replacing angular.module function with the own function returning the module used to bootstrap the app.

var myApp = angular.module('myApp', []);
angular.module = function() {
  return myApp;
}

And All modules that are registered afterwards are actually being registered in myApp module.

This method combined with one described using providers like $controllerProvider will allow you to add “modules” after angular.bootstrap.

Dis advantage:

• The configuration blocks of the modules that are added to angular.bootstrap is not called. 
• Overriding angular.module function like a “dirty hack”.