AngularJS $location service with forward and back

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-controller="Ctrl">
    <ul>
      <li><a href="/test1">Test 1</a></li>
      <li><a href="/test2">Test 2</a></li>
      <li><a href="/test3">Test 3</a></li>
      <li><a href="" ng-click="back()">Back</a></li>
      <li><a href="" ng-click="forward()">Forward</a></li>
    </ul>
    
    <h3>$locationChangeStart</h3>
    <pre>
      $location.path(): {{ startPath }}
      newUrl: {{ startNewUrl }}
      oldUrl: {{ startOldUrl }}
    </pre>
    
    <h3>$locationChangeSuccess</h3>
    <pre>
      $location.path(): {{ successPath }}
      newUrl: {{ successNewUrl }}
      oldUrl: {{ successOldUrl }}
    </pre>
  </body>


<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.js"></script>
<script src="script.js"></script>
</html>

angular.module("App", ["ngRoute"])
.config(function ($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when("/test1", {});
  $routeProvider.when("/test2", {});
  $routeProvider.when("/test3", {});
})
.controller("Ctrl", function ($scope, $location, $window) {
  $scope.$on("$locationChangeStart", function (event, newUrl, oldUrl) {
    $scope.startPath = $location.path();
    $scope.startNewUrl = newUrl;
    $scope.startOldUrl = oldUrl;
  });
  $scope.$on("$locationChangeSuccess", function (event, newUrl, oldUrl) {
    $scope.successPath = $location.path();
    $scope.successNewUrl = newUrl;
    $scope.successOldUrl = oldUrl;
  });
  $scope.back = function () {
    $window.history.back();
  };
  $scope.forward = function () {
    $window.history.forward();
  };
});

/* Styles go here */