Angular JS route causing infinite loop

Question

I'm trying to figure out why the page doesn't navigate to its template when clicked. The URL updates, and I have no JS errors.. I believe it loads the file, but then it infinitely loads the controller. I found this out after I put a console.log('test!') in my SessionsController's instantiation.

The layout

<div ng-view></div>

My View

<a href="/testing"> My link of seriousness </a>

My JS

window.MainController = function($scope, $route, $routeParams, $location) {
  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
  console.log($route);
  console.log($location);
  console.log($routeParams);
};

MainController.$inject = ["$scope", "$route"];

window.app = angular.module('web_client', [], function($routeProvider, $locationProvider) {
  return $routeProvider.when('/testing', {
    templateUrl: '/partials/other_stuff/index.html',
    controller: 'MyController'
  });
});


window.MyController = function($scope, $http) {
  console.log('Infinite Loop!');
};

And in partials/sessions/new.html , I have big and bright :

FOOBAR!

Answer 1

Problem with Same Symptoms

I recently solved a similar problem in one of my projects. I added console.log("Video Page Controller Loaded") into the controller I was debugging. Likewise, it logged that text until I close the tab.

My solution:

I was referenced the wrong name for the template file.

when('/videos', {
  templateUrl: 'templates/video-list.tpl.html',
  controller: 'VideoListCtrl'
})

When I should have had:

when('/videos', {
  templateUrl: 'templates/video-list.html',
  controller: 'VideoListCtrl'
})

Answer 2

My problem was with a template URL which was incorrect, and then started triggering a route that matched the URL pattern. Double check your templateUrl path is correct.