Ручная загрузка шаблона с контроллером в AngularJS

В AngularJS я пытаюсь вручную загрузить шаблон, который использует предопределенный контроллер.

Я вызываю WebApi, чтобы получить список доступных шаблонов. Когда этот список получен, я должен загрузить каждый шаблон на страницу. В каждом шаблоне также используется контроллер AngularJS, поэтому соединение между шаблоном и предварительно загруженным контроллером должно работать.

После некоторого поиска в Google я остановился на этом предыдущем (и несколько старом) вопросе: AngularJS Manually Render Controller и шаблон

Кажется, он делает именно то, что я хочу, но у него есть директива, которая использует больше параметров, чем мне нужно. Кроме того, у меня нет директив для моих шаблонов. Я просто не могу понять, как заставить его делать то, что я хочу.

Как я могу заставить ExampleTemplateToLoad.html загружаться кодом, вставленным в div#LoadedTemplates, при этом функционируя как обычный шаблон с использованием контроллера?

main.js

var myApp = angular.module('myApp', [.....]);
myApp.config(function($routeProvider) {
    $routeProvider.when('/', { templateUrl : '/mainTemplate.html' });
});

myApp.controller('mainController', function ($scope, $http) {
    $http.get('/api/getListOfTemplateScripts').success(function (data) {
        // This returns a list of scripts that should be loaded
        // Scripts are loaded using https://github.com/ded/script.js
        // These scripts show up in "Sources" in Chrome Developer Tools,
        // and any syntax errors in these scripts are also displayed in
        // the console, so the script is definitely loaded
        angular.forEach(data, function (scriptFile, key) {
            $script(scriptFile, function() {
                console.log(scriptFile + " loaded");
            });
        });
    })
    .then(function() {
        $http.get('/api/getListOfTemplate').success(function (data) {
            // This returns a list that includes ExampleTemplateToLoad.html
            // The template should then be loaded into div#LoadedTemplates
            angular.forEach(data, function (templateFile, key) {
                // This is logged *after* "scriptToLoad loaded" in the console
                console.log('Loading template ' + templateFile);
            });
        });
    });
});

mainTemplate.html

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

ПримерTemplateToLoad.html

<div ng-controller="loadedTemplateController">
    <!-- Do whatever the template needs to do, using variables defined
         in $scope as it would normally do -->
</div>

ПримерTemplateControllerToLoad.js

myApp.controller('loadedTemplateController', function ($scope, $http) {
});