title: Why if I load a template dynamically, in Chrome element.scope() is undefined while it's defined for FireFox?
body: <p>I'm trying to register/load controller, after loading the mathching block/template dynamically by EJS(javascript):</p>
  
  <pre><code>    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));
      }
  </code></pre>
  
  <p>At this point:</p>
  
  <pre><code>angularMainCtrl.scope().activateView(angularHtmlCtrlContainer);
  </code></pre>
  
  <p>Chrome and Firefox say </p>
  
  <pre><code>Error: [ng:areq] Argument 'StatusBarController' is not a function, got undefined
  </code></pre>
  
  <p>myApp:</p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  
  myApp.controller("myController", function($scope, $compile){
  
       $scope.activateView = function(viewEl){
               $compile(viewEl.contents())($scope);
               $scope.$apply();
       }
  });
  </code></pre>
  
  <p>Where am I doing wrong?</p>