Tengo una página existente en la que necesito colocar una aplicación angular con controladores que se pueden cargar dinámicamente.

Aquí hay un fragmento de código que implementa mi mejor conjetura sobre cómo se debe hacer en función de la API y algunas preguntas relacionadas que he encontrado:

// Make module Foo
angular.module('Foo', []);
// Bootstrap Foo
var injector = angular.bootstrap($('body'), ['Foo']);
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl', function() { });
// Load an element that uses controller Ctrl
var ctrl = $('<div ng-controller="Ctrl">').appendTo('body');
// compile the new element
injector.invoke(function($compile, $rootScope) {
    // the linker here throws the exception
    $compile(ctrl)($rootScope);
});

JSFiddle. Tenga en cuenta que esta es una simplificación de la cadena real de eventos, hay varias llamadas asíncronas y entradas de usuario entre las líneas anteriores.

Cuando intento ejecutar el código anterior, el enlazador que devuelve $ compila los tiros:Argument 'Ctrl' is not a function, got undefined. Si entendí correctamente el bootstrap, el inyector que devuelve debería conocer elFoo módulo, ¿verdad?

Si en cambio hago un nuevo inyector usandoangular.injector(['ng', 'Foo']), parece funcionar pero crea una nueva$rootScope que ya no es el mismo ámbito que el elemento donde elFoo módulo fue bootstrapped.

¿Estoy usando la funcionalidad correcta para hacer esto o hay algo que me perdí? Sé que esto no lo está haciendo de manera Angular, pero necesito agregar nuevos componentes que usen Angular a páginas antiguas que no lo hacen, y no conozco todos los componentes que podrían ser necesarios cuando arranco el módulo.

ACTUALIZAR:

He actualizado elviolín para mostrar que necesito poder agregar varios controladores a la página en puntos no determinados en el tiempo.