title: 'Unknown provider' error while retrieving lazy-loaded controller
body: <p>I want 'MyController2' to inherit 'MyController1', however, both controllers are lazyloaded using ocLazyLoad. According to <em>Jussi Kosune</em>n's answer to this question (<a href="https://stackoverflow.com/a/15292441/2197555">https://stackoverflow.com/a/15292441/2197555</a>), I have made a function <code>registerDynamic()</code> to register the controllers, but it still reports the following error at the line with '$controller' in controller1.js: </p>
  
  <p><strong>Error: [$injector:unpr] Unknown provider: $elementProvider &lt;- $element &lt;- DataTableController</strong></p>
  
  <p>My codes are like this. </p>
  
  <p>First file <code>controller1.js</code>:</p>
  
  <pre><code>angular.module( 'myApp',[])
      .controller( 'MyController1', [ function($scope){
          // ...
      }]);
  </code></pre>
  
  <p>Second file <code>controller2.js</code>:</p>
  
  <pre><code>angular.module( 'myApp')
      .controller( 'MyController2', [ '$controller', '$scope',function($controller, $scope){
           $controller('MyController1', {$scope: $scope }); // here triggers error '[$injector:unpr] Unknown provider'
           // ...
      }]);
  </code></pre>
  
  <p>In the third File <code>lazy-load.js</code>, I lazyload the above two .js files: </p>
  
  <pre><code>var app = angular.module('myApp'),
  queueLen = app._invokeQueue.length;
  app.directive( 'LazyLoad', [ function( ){
      return {
          restrict: 'EA',
          scope: {
             src: '@',
          },
          link: function( scope, element, attr ){
              var registerDynamic = function() {
                  // Register the controls/directives/services we just loaded
                  var queue = syncreonApp._invokeQueue;
                  for(var i=queueLen;i&lt;queue.length;i++) {
                      var call = queue[i];
                      // call is in the form [providerName, providerFunc, providerArguments]
                      var provider = syncreonApp.providers[call[0]];
                      if(provider) {
                          // e.g. $controllerProvider.register("Ctrl", function() { ... })
                          $log.debug("Registering " + call[1] + " " + call[2][0] + " ...");
                          provider[call[1]].apply(provider, call[2]);
                      }
                  }
                  queueLen = i;
              },
              loadMultipleJs = function ( js_files ){
                  var deferred = $q.defer();
                  var js_file1 = js_files.shift(),
                      js_file2 = js_files.shift();
  
                   $ocLazyLoad.load( js_file1 )
                      .then ( function(){
                          registerDynamic();
                          $ocLazyLoad.load( js_file2 )
                              .then ( function(){
                                  registerDynamic();
                                  deferred.resolve();
                              }, function(){
                                  deferred.reject();
                              });
                      }, function(){
                          deferred.reject();
                      });
             };
             jsonOfJsFilesToLoad = JSON.parse(scope.src);
             loadMultipleJs(jsonOfJsFilesToLoad );
         }
     };
  }]);
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p><a href="https://docs.angularjs.org/error/$injector/unpr?p0=$elementProvider%20%3C-%20$element%20%3C-%20DataTableController" rel="nofollow noreferrer">The official Angular documentation for 'Unknown Provider' error</a> says: </p>
  
  <blockquote>
    <p>Attempting to inject one controller into another will also throw an Unknown provider error:</p>
  </blockquote>
  
  <p>Maybe we just cannot injector controller into anther even using $controller service?</p>