title: random app crashing with ngRoute
body: <p>I was following the guides on the AngularJS ngView page, but customizing it to my specific app. When I try to change views, the app crashes.</p>
  
  <p>The relevant code is below:</p>
  
  <pre><code>app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
  
      $routeProvider.when('/', {
          templateUrl: '/templates/items.html',
          controller: 'itemListController',
          controllerAs: 'list'
      }).when('/Item/:itemID', {
          templateUrl: '/templates/item.html',
          controller: 'itemController',
          controllerAs: 'item'
      });
  
      $locationProvider.html5Mode(true);
  }]);
  </code></pre>
  
  <p>The items view works just fine when the page loads. However, when I change <code>$location.path</code> to <code>/Item/1</code>, the app crashes the browser. If I change the <code>templateUrl</code> to the same <code>/templates/items.html</code> it changes properly, but it obviously doesn't work right as the template is not set up for that controller.</p>
  
  <p>Currently, my <code>item.html</code> temnplate is an empty file. I've tried adding things to it with no luck. Likewise, my <code>itemController</code> is an empty controller. However, when I inject the <code>$routeParams</code> dependency, I get an infinite loop and the "Maximum call stack size limit exceeded" error. Below is my infinite looping controller:</p>
  
  <pre><code>app.controller('itemController', ['itemService', '$routeParams', function(itemService, $routeParams){
      console.log($routeParams);
  }]);
  </code></pre>
  
  <p>I had a similar problem with my default <code>/</code> view, but somehow got it working. After a few hours I have been unable to resolve this problem. Is there something I've done incorrectly? Or is the problem somewhere deeper in my code?</p>
  
  <p><strong>Update</strong>
  As requested in the comments, the controller where I change <code>$location.path</code> is my main "view" controller:</p>
  
  <pre><code>app.controller('viewController', ['$route', '$routeParams', '$location', function($route, $routeParams, $location){
      var ctrl = this;
      ctrl.title = "App Name";
      ctrl.$route = $route;
      ctrl.$location = $location;
      ctrl.$routeParams = $routeParams;
  
      ctrl.changeView = function(view){
          $location.path(view);
      };
  }]);
  </code></pre>
  
  <p><code>changeView()</code> is then called inside of elements' <code>ng-click</code>. For example, one of the items in <code>items.html</code> has <code>ng-click="view.changeView('/Item/'+item.Id)"</code></p>