title: AngularJS infinite loop with ng-view
body: <p>I've just started using AngularJS for a new app I'm looking at putting together but I've run into a problem when using routes and views.</p>
  
  <p>I've stripped this example down to the bare minimum but the issue remains. All this example is doing is hitting the server and returning the index.html page, which then sources Angular etc.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="main"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
  
          &lt;link rel="stylesheet" type="text/css" src="css/style.css" /&gt;
  
          &lt;script type="text/javascript" src="js/ext/angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/ext/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/test.js"&gt;&lt;/script&gt;
  
          &lt;base href="/ui/"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>(function() {
      var app = angular.module('main', ['ngRoute', 'test']);
  
      app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  
          $routeProvider
              .when('/test', {
                  templateUrl: 'html/test.html',
                  controller: 'TestCtrl'
              })
              .otherwise({
                  redirectTo: '/test'
              });
  
          $locationProvider.html5Mode(true);
      }]);
  })();
  </code></pre>
  
  <p><strong>test.js</strong></p>
  
  <pre><code>(function() {
      var app = angular.module('test', []);
  
      // get hierarchy
      app.controller('TestCtrl', ['$scope', function($scope) {
  
          alert('here');
  
      }]);
  })();
  </code></pre>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;div&gt;FooBar!&lt;/div&gt;
  </code></pre>
  
  <p>The alert gets fired infinitely but I just don't know why. I've seen other examples where ng-view and routing appear to be used exactly the same way, so I'm not sure what I'm doing wrong...</p>