title: How do I get the Back Button to work with an AngularJS ui-router state machine?
body: <p>I have implemented an angularjs single page application using <a href="https://github.com/angular-ui/ui-router">ui-router</a>. </p>
  
  <p>Originally I identified each state using a distinct url however this made for unfriendly, GUID packed urls.</p>
  
  <p>So I have now defined my site as a much simpler state-machine. The states are not identified by urls but are simply transitioned to as required, like this:</p>
  
  <p><strong>Define Nested States</strong></p>
  
  <pre><code>angular
  .module 'app', ['ui.router']
  .config ($stateProvider) -&gt;
      $stateProvider
      .state 'main', 
          templateUrl: 'main.html'
          controller: 'mainCtrl'
          params: ['locationId']
  
      .state 'folder', 
          templateUrl: 'folder.html'
          parent: 'main'
          controller: 'folderCtrl'
          resolve:
              folder:(apiService) -&gt; apiService.get '#base/folder/#locationId'
  </code></pre>
  
  <p><strong>Transition to a Defined State</strong></p>
  
  <pre><code>#The ui-sref attrib transitions to the 'folder' state
  
  a(ui-sref="folder({locationId:'{{folder.Id}}'})")
      | {{ folder.Name }}
  </code></pre>
  
  <p>This system works very well and I love its clean syntax. However, as I am not using urls the back button does not work. </p>
  
  <p>How do I keep my neat ui-router state-machine but enable the back button functionality? </p>