title: how to refresh data in cache on state reload- angular 1.5 / ui-router
body: <p>I am working on a task where I have a bunch of widgets on a dashboard.  When the user changes the customer on the dashboard the <code>$state</code> is reloaded, and the widgets' position should be saved to a cache, but the data relevant to the widgets should be refreshed. There are two relevant components, a header component where the customer is changed, and the dashboard component where the widgets are. I'd like to accomplish this without touching the header component.</p>
  
  <p>Previously, I wrote a function to remove all data related properties from the cache after saving in the cache, but I think that might not be the right approach and too complicated. what is the best way to accomplish this? </p>
  
  <p>so suppose each widget looks like this:</p>
  
  <pre><code> {
   widgetType: chart, 
   position: someCoordinatesThatStayTheSameOnStateChange,
   chart: containsDataThatNeedsToBeRefreshed,
   chartData: containsDataThatNeedsToBeRefreshed
  }
  </code></pre>
  
  <p>this is a <code>$resolve</code>'d function in my routes file which exposes <code>$ctrl.widgets</code> in the dashboard controller:</p>
  
  <pre><code>widgets($http, $q, CacheFactory, WidgetsService) {
        'ngInject';
        let mockWidgetData = WidgetsService.getAllWidgets();
        let widgetsCache = CacheFactory.get('widgets');
        if (!widgetsCache) {
          CacheFactory.createCache('widgets', {
            storageMode: 'localStorage',
          });
        }
        return mockWidgetData;
      },
  </code></pre>
  
  <p>relevant places where I save data in a cache in the dashboard controller:</p>
  
  <pre><code>let widgetsCache = CacheFactory.get('widgets');
    let widgetsCacheItems = widgetsCache.get('widgets');
  
    gridsterConfig.resizable.stop = function(event, $element, widget) {
      widgetsCache.put("widgets", $ctrl.widgets);
     //clearDataFromCache()
    }
    gridsterConfig.draggable.stop = function(event, $element, widget) {
      widgetsCache.put("widgets", $ctrl.widgets);
      //clearDataFromCache()
    }
    $ctrl.toggleVisibility = function(widget) {
      widget.hidden = !widget.hidden;
      widgetsCache.put("widgets", $ctrl.widgets);
     //clearDataFromCache()
    }
  </code></pre>
  
  <p>old function I wrote:</p>
  
  <pre><code>function clearDataFromCache() {
          let widgetObjectsInCache = widgetsCache.get('widgets');
          widgetObjectsInCache.forEach((widget) =&gt; {
            if (widget.chart) delete widget.chart;
            if (widget.chartConfig) delete widget.chartConfig;
          })
          console.log(widgetObjectsInCache, "THE CACHE AFTER REMOVING ANY DATA RELATED STUFF");
        }
  </code></pre>