title: Angular $location.state() vs history.pushState behavior
body: <p>I am attempting to build a proof of concept single page application that uses the history api to store the state of the view such that when a user navigates using the browser's back and forward buttons, the previous state will be displayed.</p>
  
  <p>This simple example is a series of page links and few values that get displayed, to show the state of the state (no pun intended).</p>
  
  <p>This is all in a functional <a href="https://plnkr.co/edit/RpLGqKEXar5zYGhxbAvI?p=info" rel="noreferrer">plnkr</a></p>
  
  <p><strong>Basic view</strong>:</p>
  
  <pre><code>&lt;div ng-app="testApp"&gt;
      &lt;div ng-controller="testCtrl"&gt;
          &lt;h1&gt;State Data: {{data.displayText}}&lt;/h1&gt;
          &lt;h2&gt;Current Page: {{data.currentPage}}&lt;/h2&gt;
          &lt;a ng-click="goToPage(page)" ng-repeat="page in pages" class="page"&gt;{{page}}&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>App/Controller:</strong></p>
  
  <pre><code>var testApp = angular.module('testApp', ['ngRoute'])
    .config(function($locationProvider) {
          $locationProvider.html5Mode(true);
    });
  
  testApp.controller('testCtrl', ['$scope', '$location', function ($scope, $location) {
  
      // Hardcode some pages
      $scope.pages = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  
     // Set initial data
      $scope.data = {
          currentPage: 1,
          displayText: "This is the initial state"
      };
  
      // Set initial data in state
      $location.state($scope.data);
  
      // Watch for location changes so we can apply state accordingly
      $scope.$on('$locationChangeSuccess', function (a, newUrl, oldUrl) {
          $scope.data = $location.state();
      });
  
      // Move between pages
      $scope.goToPage = function (page) {
  
          $scope.data.currentPage = page;
          $scope.data.displayText = "This is page " + page;
  
          $location.search("page", page);
          $location.state($scope.data);
  
          //history.pushState($scope.data, null, '/ThisPage?page=' + page);
      };
  }]);
  </code></pre>
  
  <p><strong>You'll notice the commented history.pushState() line.</strong>  Using that line instead of the $location.search() and $location.state() lines above actually works and performs as I'd expect, but I'd like to get this working using the correct angular way.</p>
  
  <p><strong>EDIT:</strong> To be clear, I'm not asking IF I should do this the angular way.  I am asking what IS the proper angular way to get this working.  The two calls to $location in $scope.goToPage() do not work, but the call to history.pushState (the commented line), does work.  I'm obviously missing something for how to achieve this with pure angular and that's what I need help with.  Cheers!</p>