title: How can I get AngularJS ui-router to respond correctly to a browser page refresh?
body: <p>I have created an AngularJS application that uses ur-router. Here's a small sample of the config:</p>
  
  <pre><code> $locationProvider.html5Mode(true);
  
   var admin = {
          name: 'admin',
          url: '/Admin',
          views: {
              'root': {
                  templateUrl: '/app/admin/partials/home.html',
              },
              'content': {
                  templateUrl: '/app/admin/partials/overview.html',
              }
          }
      };
  
      var adminContent = {
          name: 'admin.content',
          parent: 'admin',
          url: '/:content',
          views: {
              'root': {
                  templateUrl: '/app/admin/partials/home.html',
              },
              'content': {
                  templateUrl: function (stateParams) {
                      return '/app/admin/partials/' + stateParams.content + '.html';
                  },
              }
          }
      };
  </code></pre>
  
  <p>Everything is working when I start up the application, then go to the /Admin with a link and next I go to the reference link and it brings up the page:</p>
  
  <pre><code>http://xx.com/Admin/reference
  </code></pre>
  
  <p>When I click the browser back button it goes back to the previous page as expected. </p>
  
  <p>However if I do a refresh now everything goes wrong. It forgets about ui-router and tries to find the page: xx.com/Admin/Reference</p>
  
  <p>For reference I am using:  @version v0.2.13</p>
  
  <p>My index file looks like this:</p>
  
  <pre><code>&lt;head&gt;
      &lt;base href="/" /&gt;
  </code></pre>
  
  <p>Can someone give me some suggestions as to what I am doing wrong?</p>