title: Failure of $injector.invoke within a $routeProvider route's templateUrl function
body: <p>EDIT: I'm no longer actually trying to do what is outlined below, but I'd still love to know why it's not possible to use the $injector in this way.</p>
  
  <hr>
  
  <p>I'm expecting there might be a valid reason I'm experiencing a failure in using $injector.invoke when calling it from a function defined for a route's templateUrl, but it would be good to get confirmation of that. If this should work, that'd be good to know also. :)</p>
  
  <p>The failure is demonstrated in <a href="http://plnkr.co/edit/HwXpe2US5WUhJo2xv7XW" rel="nofollow">this plnkr</a>. The sample has two uses of $injector.invoke. There are two clickable divs in the sample to trigger each use:
  one triggers a call from a controller that works just fine
  the other is a call from the route's templateUrl function which fails.</p>
  
  <p>The JavaScript there is as follows:</p>
  
  <pre><code>function MyCtrl($location, $injector) {
    this.tryInjectorInvoke = function() {
      // This works
      $injector.invoke(function($rootScope) {
        alert('Have $rootScope? ' + !!$rootScope);
      });
    };
    // This is used to trigger a route change to the failing case.
    this.navTo = function(dest) {
      $location.path(dest);
    };
  }
  
  function configRoutes($routeProvider, $injector) {
    $routeProvider.when('/fails', {
      controller: 'MyCtrl',
      controllerAs: 'ctrl',
      templateUrl: function() {
        try {
          // This fails horribly.
          $injector.invoke(function($rootScope) {
            return 'fails.html'
          });
        } catch (err) {
          alert('$injector.invoke failed!\n\n' + err);
        }
      }
    }).otherwise({
      controller: 'MyCtrl',
      controllerAs: 'ctrl',
      templateUrl: 'works.html'
    });
  }
  
  var myApp = angular.module('myApp', ['ngRoute']);
  myApp.controller('MyCtrl', MyCtrl);
  myApp.config(configRoutes);
  </code></pre>