title: Correct way to update singletons like factories in AngularJS
body: <p>I have the below controller named MapController
  MapController.js</p>
  
  <pre><code>var self = this;
  self.factory = MapStateFactory;
  self.origin = self.factory.originCity;
  self.destination = self.factory.destinationCity;
  
  //The wrong way
  //Updating self.origin will shadow the value and will no longer point to the factory
  self.changeOrigin = function () {
      self.origin = {
          name: 'New Origin'
      };
  };
  
  //However, this is still incorrect. 
  //It popluates the change in the factory but if I output self.destination on the page, it hasnt updated
  self.changeDestination = function () {
      //This also doesn't update both locations if I use
      //MapstateFactory.destinationCity = ''
      self.factory.destination = {
          name: 'New Destination'
      };
  };
  </code></pre>
  
  <p>If you just assume that my factory is a standard factory, no funny business, how do I properly update the factory using these functions (which are attached to buttons if make any sense).</p>
  
  <p>This is an issue I am struggline with at the moment. <strong>The only solution I have come across is to do a watch in the value of MapStateFactory.originCity</strong> which seems awfully messy...</p>
  
  <p>I could just do something like</p>
  
  <pre><code>self.changeDestination = function () {
     self.destination = {
         name: 'New Destination'
     };
     self.factory.destinationCity = {
         name: 'New Destination'
     };
  };
  </code></pre>
  
  <p>But <em>surely</em> this is bad practice?</p>