View not being updated with angular-cache with localStorage


I’m building an app the uses angular-cache to leverage data persistence. This data is displayed in a ng-repeat list. Either by user interaction (in another view!) or new data being loaded in the background, I need the view to update to reflect this.

When developing my app everything works perfectly, however, as soon as I start using angular-cache with localStorage, views stop being updated. When I turn off localStorage (but still use in memory caching from angular-cache) everything works as expected: the data updates and so is the DOM.

I was able to reproduce the issue with this CodePen To demonstrate the issue you switch tabs (from home to about). If you look in the console you can see that new items are being added to the localStorage cache. However the homescreen doesn’t update. If you then refresh the page (within the 10 second cache magAge) the page shows the correct list of items…

However, if we comment out line 81, the caching is no longer persistent after a refresh, however the new items are added to the DOM every time the view changes.

I hope someone can help me out. Right now I’m at a point I don’t know if this is a bug in my code, angular-cache, ionic, or even angular.