title: How to cache responses from rest service with angular and local storage and achieve fast UI responses
body: <p>I have an App that requests a list of possible items from a REST service. I use $http or $resource for that. </p>
  
  <p>Now i want to cache those items in localStorage and only sync my local storage with the backend every now and then to check if anything has changed.</p>
  
  <p>So before i did this:</p>
  
  <pre><code>var getAllPlugs = function () {
  
  
          var backend = $resource(getURLString() + '/getAllPlugsAvailable');
          return backend.query();
      };
  </code></pre>
  
  <p>but now i want the function to return my cached items right away and once the asynchronous http request is done for, it should update the item list if something has changed. This of course should be directly reflected in the UI</p>
  
  <p>The problem if i do something like this:</p>
  
  <p>var getAllPlugs = function () {</p>
  
  <pre><code>        var backend = $resource(getURLString() + '/getAllPlugsAvailable');
          var result =  backend.query();
          localStorage.setItem("plugs", JSON.stringify(result));
          return result
      };
  </code></pre>
  
  <p>i still only get the result of the http request. But how to achieve it so i get the cached ones first and then that object will be updated with changes. Maybe a success callback from my controller passed to the service that calls the backend? I need some inspriation, sorry if it is trivial... </p>