Eu tenho uma página existente na qual eu preciso soltar um aplicativo angular com controladores que podem ser carregados dinamicamente.

Aqui está um snippet que implementa meu melhor palpite sobre como isso deve ser feito com base na API e algumas perguntas relacionadas que encontrei:

// 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. Observe que isso é uma simplificação da cadeia real de eventos, existem várias chamadas assíncronas e entradas do usuário entre as linhas acima.

Quando tento executar o código acima, o vinculador que é retornado pelo $ compile lança:Argument 'Ctrl' is not a function, got undefined. Se eu entendi o bootstrap corretamente, o injetor que ele retorna deve saber sobre oFoo módulo, certo?

Se ao invés eu fizer um novo injetor usandoangular.injector(['ng', 'Foo']), parece funcionar, mas cria uma nova$rootScope que não tem mais o mesmo escopo que o elemento em que oFoo módulo foi bootstrapped.

Estou usando a funcionalidade certa para fazer isso ou há algo que perdi? Eu sei que isso não está fazendo da maneira Angular, mas eu preciso adicionar novos componentes que usam Angular para páginas antigas que não, e eu não sei todos os componentes que podem ser necessários quando eu inicializo o módulo.

ATUALIZAR:

Atualizei oviolino para mostrar que preciso poder adicionar vários controladores à página em pontos indeterminados no tempo.