title: How do I set root path in Angular when using BASE tag and HTML5Mode?
body: <p>Given my basic example of an Angular app that lives in a <code>&lt;base href="/test/"&gt;</code> directory, what is the best way to send the application back to the home (or root) path? All the links in the menu snippet (below) work, however, the "Home" link causes IE to reload the app (<code>HomeCtrl</code>, specifically) on subsequent requests.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var basic = '&lt;h1&gt;{{title}}&lt;/h1&gt;&lt;p&gt;{{body}}&lt;/p&gt;';
  
  var app = angular.module('website', []);
  
  app.config( function($routeProvider, $locationProvider) {
      $routeProvider.
          when('/', { template: basic, controller: HomeCtrl }).
          when('/about', { template: basic, controller: AboutCtrl }).
          when('/experiments', { template: basic, controller: ExperimentsCtrl }).
          when('/:alias', { template: basic, controller: PageCtrl, resolve: { alias: resolveAlias } }).
          otherwise({ redirectTo: '/' });
  
      $locationProvider.html5Mode('true');
  } );
  </code></pre>
  
  <p><strong>menu.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;base href="/test/"&gt;
  ....
  &lt;div id="menu"&gt;
      &lt;a href="./" class="btn"&gt;Home&lt;/a&gt;
      &lt;a href="./about" class="btn"&gt;About&lt;/a&gt;
      &lt;a href="./experiments" class="btn"&gt;Experiments&lt;/a&gt;
      &lt;a href="./unicorn" class="btn"&gt;Unicorn&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Each request to the root, in IE9, reruns the JS file and then triggers the route events twice.</p>
  
  <pre><code>LOG: MainCtrl Loaded!
  LOG: routeChangeStart[object Arguments]
  LOG: routeChangeSuccess[object Arguments]
  LOG: routeChangeStart[object Arguments]
  LOG: routeChangeSuccess[object Arguments]
  LOG: HomeCtrl Called!
  </code></pre>