Regenerating data provided by Angular factories after source change - angularjs

Question

I simplified my application to this example, so I know this particular case can be done more easier but I wanted to keep the app's original structure.
So, here I have a rootScope set at the beginning (this mock the data source from the original app):
.run(function($rootScope){
$rootScope.initarray = [1,1];
})
There are two factories:
The priceFactory returns $rootScope.initarray in an asynchronous way.
The doublePrice factory takes the array from priceFactory and doubles every item.
.factory('priceFactory', function ($rootScope, $q, $timeout) {
var deferred = $q.defer();
$timeout(function() {
deferred.resolve($rootScope.initarray)
}, 1000);
console.log('priceFactory');
return deferred.promise;
})
.factory("doublePrice", function (priceFactory) {
console.log('doublePrice');
return priceFactory.then(
function(data){
var temp = [];
for (i in data){
temp.push(data[i]*2)
}
return temp;
});
})
I also having two ui-route states, one showing the data returned by doublePrice, the second state having a button that adds a new element to $rootScope.initarray.
My problem is that when I add a new element to $rootScope.initarray in the second state, i have to update the data shown in the first state.
Here's a codepen example about the issue.
So, the question: if there is any simple way to achieve that update. I'm using angular with ionic, it's not a cache issue, but the factories and ui-router state resolve that returns the same data during the app run.

Answer 1

The usage factory service suggests that the returning value is cached on the first injection and reused on the subsequent injections. This is the desired behaviour and it can't be changed.
The need to get a fresh promise on each route change is the common case for route resolvers. The alternative is to use factory service that returns a function:
.factory('priceFactory', function ($rootScope, $timeout) {
return function () {
// no deferred antipattern is necessary here
return $timeout(function() {
return $rootScope.initarray;
}, 1000);
};
});
So it can be used like that (good if additional parameters from $state should be provided to a function):
priceResolver: function (priceFactory) {
return priceFactory();
}
Or it can be service service, which is a perfect use case for resolvers, because it issues a new instance on each injection. service services get their instance as this but they can ignore it and return a new object instead:
.service('priceService', function ($rootScope, $timeout) {
return $timeout(function() {
return $rootScope.initarray;
}, 1000);
});