angularjs - テンプレートを動的にロードすると、Chrome で element.scope() が FireFox 用に定義されているのに undefined になるのはなぜですか?

Question

EJS（javascript）によって動的にマッチングブロック/テンプレートをロードした後、コントローラーを登録/ロードしようとしています：

    logMessage("Rendering " + section + "using the following: templates/blocks/" + pageRegister[pageIdentifier].blocks[section][block] + "/" + block + ".ejs");

    if( blockRegister[block].hasOwnProperty("controller") ){

        //console.log( angular.element(document.getElementById(section)) );
        var b = angular.element(document.getElementById(section));

        b.append(new EJS({
            url: 'templates/blocks/' + pageRegister[pageIdentifier].blocks[section][block] + '/' + block + '.ejs'
        }).render(currentPageData));

        var angularMainCtrl = angular.element(document.getElementById("view-container"));
        //Chrome: undefined
        //Firefox: shows the scope obj of the main app, so what I aspected
        console.log( angularMainCtrl.scope() );

        angularMainCtrl.scope().activateView(angularHtmlCtrlContainer);
    }
    else{
        $('#' + section).append(new EJS({
            url: 'templates/blocks/' + pageRegister[pageIdentifier].blocks[section][block] + '/' + block + '.ejs'
        }).render(currentPageData));
    }

この時点で：

angularMainCtrl.scope().activateView(angularHtmlCtrlContainer);

ChromeとFirefoxは言う

Error: [ng:areq] Argument 'StatusBarController' is not a function, got undefined

マイアプリ:

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope, $compile){

     $scope.activateView = function(viewEl){
             $compile(viewEl.contents())($scope);
             $scope.$apply();
     }
});

私はどこで間違っていますか？