title: How to watch for localstorage changes with AngularJS
body: <p>Is it possible to use $watch to monitor changes to localStorage?</p>
  
  <p>I have a factory to make setting/getting a little simpler</p>
  
  <pre><code>.factory('$localstorage', ['$window', function($window) {
      return {
          set: function(key, value) {
              $window.localStorage[key] = value;
          },
  
          get: function(key, defaultValue) {
              return $window.localStorage[key] || defaultValue;
          },
  
          setObject: function(key, value) {
              $window.localStorage[key] = JSON.stringify(value);
          },
  
          getObject: function(key) {
              return JSON.parse($window.localStorage[key] || '{}');
          }
      }
  }]);
  </code></pre>
  
  <p>In my controller I have</p>
  
  <pre><code>.controller('CodesCtrl', function($scope, $localstorage) {
      $scope.codes = $localstorage.getObject('codes');
      ...
  </code></pre>
  
  <p>In another controller I'm adding to local storage. I'd like to render the changes as soon as localStorage changes.</p>
  
  <p>I've seen a few SO posts that use things like ngStorage but ideally I'd like to avoid that.</p>
  
  <p>Is it possible? Could someone point me in the right direction?</p>