AngularJS route resolve cache problem

by felikz

HTML

<div ng-controller="whateverCtrl">
    <a ng-href='/'>Index</a>
    <a ng-href='/page'>Page</a>
    <br />
    <h2>{{what}}</h2>
    <h3>{{word.val}}</h3>
</div>

JavaScript

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

app.factory('rulesFactory', ['$q', '$timeout', 'Words',
     function ($q, $timeout, Words) {
    
        var def = $q.defer();
  
        $timeout(function () {
            Words.word.val = 'Change time in seconds:' + new Date().getTime() / 1000;
            def.resolve();
        }, 3000);
    
        return def.promise;
    }
]);

app.config(
    ['$routeProvider', '$locationProvider',
     function ($routeProvider, $locationProvider) {
    
    $locationProvider.hashPrefix('!')
    $locationProvider.html5Mode(true);
    
    $routeProvider
    .when('/', {
        action: 'index',
        resolve: [ 'rulesFactory' ]
    })
    .when('/page', {
        action: 'page',
        resolve: [ 'rulesFactory' ]
    })
    .otherwise({ redirectTo: '/' });
}]);

app.service('Words', [function () {
    var word = {
        val: 'Factory will change this once, if resolve defined via app.factory method'
    };

    return {
        word: word
    };
}]);

app.controller('whateverCtrl',
    ['$scope', '$route', 'Words',
    function ($scope, $route, Words) {

        $scope.word = Words.word;

        $scope.$on('$routeChangeSuccess', function( event ) {
            $scope.what = $route.current.action;
        });
    }
]);