Angularjs Factory value doesn't update in multiple views - angularjs

Question

I have this simple factory to get products list from data base and also to toggle if the product is favorite or not (based on user interaction).
function factoryProduct($http,$filter) {
var data = {};
data.list = [];
var service = {
getData: _getData,
toggleFav: _toggleFav
};
return service;
function _getData() {
return $http.get('my/url/get.php').then(function(res){
data.list = res;
return res;
});
};
function _toggleFav(value) {
/* data manipulation here... */
return $http.post('my/url/post.php', data).then(function(res){
if (res==1) {
return $filter('filter')(data.list)[index].inFav = value;
};
};
};
}
This is used in multiple views, such as home, category page, favorite list, wishlist, etc.. And thus it's used inside multiple controllers, where I inject the factory and then pass the data to the view.
The toggle function, since it's the same, it's called from within a directive, but is also simple, like this:
scope.toggleFav = function(data, index) {
/*data verification here*/
factoryProduct.toggleFav(value);
}
And in the controller, like this:
function MainCtrl(factoryProduct) {
var vm = this;
factoryProduct.getData().then(function(res){
vm.list = res;
})
}
function CategoryCtrl(factoryProduct) {
var vm = this;
/* category taken from url parameter */
factoryProduct.getData().then(function(res){
$filter('filter')(res, {category: urlParam});
vm.list = res;
})
}
I can get data properly, make the filter and show the correct product list on each view. I also can toggle the favorite and both, the filter and the database, are properly updated.
The problem
The problem starts when I need to change view. For example:
If I'm on the home page, set a product as favorite, go to the contact page and then comeback to the home page, the product I just set as favorite is now as 'non-favorite' item, even if it's favorite in the database and also was updated before going to the contact page.
I'm using this:
var data = {};
data.list = [];
Because I saw many answers saying to have a static array and only manipulate the data inside this array. But it's not working for me.
Any ideas?

Answer 1

There are numerous ways to set up storing data in factory for the duration of the life of the page.
Using a resolve in router can be very helpful to populate data stores. Then when controllers fire the data already exists.
Another one is to check if data exists and if it does return a $q.resolve(data).
If it doesn't exist you return the $http promise that first stores the data and then returns the stored object reference.
Another I just picked up on recently that is helpful if numerous parts of app may ask for same data before a single request has completed.
You can store the original promise made. You can use then() on that promise any time you want within the app lifecycle
app.factory('Factory', function($http){
var dataPromise=null, data=null;
function getData() {
if (!dataPromise) {
console.warn('NEW REQUEST BEING MADE')
dataPromise = $http.get('data.json').then(function(resp) {
// store the data
data = resp.data
// return data stored in factory
return data;
})
}else{
console.info('Existing promise being returned')
}
return dataPromise;
}
return {
getData: getData
}
});
This last approach will prevent 2 parts of the app making 2 simultaneous requests if the first one hasn't completed
A final approach that is used by $resource is to return an empty object that is stored in factory. Then when requests are completed they merge data into that object without breaking the original object reference. Then when that object is passed directly through to views angular watchers will catch changes and do updates
DEMO