Angular Routing Causes Infinite Loop In IE

Question

I am receiving the following error when I look at my code in Internet Explorer 10 (it does not necessarily render in standards mode, this is out of my control due to the way the page is served).

http://errors.angularjs.org/1.2.28/$rootScope/infdig

Here is the routing I've used:

phoneApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider){
    $routeProvider
      .when('/sap.com~home~phonelist/pages/index.html', {
        templateUrl: '/sap.com~home~phonelist/pages/landing.html',
        controller: 'SearchController'
      })
      .when('/sap.com~home~phonelist/pages/', {
        templateUrl: '/sap.com~home~phonelist/pages/landing.html',
        controller: 'SearchController'
      })
      .when('/sap.com~home~phonelist/pages/singleEmployee/:id', {
        templateUrl: '/sap.com~home~phonelist/pages/singleEmployee.html',
        controller: 'SingleEmployeeController'

      });

      $locationProvider.html5Mode(true);
  }]);

The base href in my index: <base href="/" /> and also the only repeat in the page:

<tr ng-repeat="employee in filteredEmployees = (employees | filter:search.currentFilter | orderBy:user.ordering:reverse)">
    <td> <a class="fakeLink" href="singleEmployee/{{$index}}">{{ employee.name }}</a></td>
    <td class="location">{{ employee.userID }}</td>
    <td class="district">{{ employee.department }}</td>
    <td class="jobTitle">{{ employee.jobTitle }}</td>
    <td class="emailAddress">{{ employee.email }}</td>
    <td class="workPhone"><a class="fakeLink" href="tel:{{employee.phone}}">{{ employee.phone }}</a></td>
</tr>

The page loads fine in Chrome, but when I try to pop it open in IE nothing loads. I've checked my html on the ng-repeat to make sure that I'm not calling a method that creates new arrays. The base href seems to be called endlessly when I inspect with developer tools. Any thoughts on what might be causing this error?

Answer 1

This is a combination of 2 issues. Number one, change

$locationProvider.html5Mode(true);

to

$locationProvider.html5Mode(false);

Betty in the comments is correct, there is an issue with IE using this for older versions. In addition to this, you need to create a new route for just /. If you're having issues with angular routes kicking in, you can call otherwise in addition to when for setting up your routes. There's more information on that style of routing in the angular documentation.