AngularJS route resolve cache problem

resolve issue

by leftstick

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<div ng-controller="whateverCtrl">
  <a ng-href='#/'>Index</a>
  <a ng-href='#/page'>Page</a>
  <p ng-click='goBack()'>back</p>
  <br />

  <h2>{{what}}</h2>
  <h3>{{word.val}}</h3>
  
  <br />
  <div ng-view></div>

</div>

JavaScript

var app = angular.module('ReproduceApp', ['ngRoute']);

app.factory('rulesFactory', ['$q', '$timeout',
  function($q, $timeout) {
    return function() {
      return $q(function(resolve){
          $timeout(function() {
              resolve('Change time in seconds:' + new Date().getTime() / 1000);
          }, 1000)
      });
    };
  }
]);

app.config(
  ['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {

      $routeProvider
        .when('/', {
          action: 'index',
          resolve: {
            'test': ['rulesFactory', function(rulesFactory) {
              return rulesFactory();
            }]
          },
          controller: 'AController',
          template: '<h3>{{test}}</h3>'
        })
        .when('/page', {
          action: 'page',
          resolve: {
            'test': ['rulesFactory', function(rulesFactory) {
              return rulesFactory();
            }]
          },
          controller: 'BController',
          template: '<h3>{{test}}</h3>'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ]);


app.controller('whateverCtrl', ['$scope', 

  function($scope) {

    $scope.goBack = function() {
      window.history.back();
    };
  }
]);

app.controller('AController', ['$scope', 'test',

  function($scope, test) {
    $scope.test = test;
  }
]);

app.controller('BController', ['$scope', 'test',

  function($scope, test) {
    $scope.test = test;
  }
]);