title: How do you update multiple firebase references without saving?
body: <p><strong>See update below</strong></p>
  
  <p>I have an angular application that has a controller and a directive on the page of that controller that both reference the same firebase data(I have a good reason for keeping them separate).  When I make changes to one reference the other references don't reflect the change unless I save the data.  What is the best way to update all local firebase references without having to save the data.  I would like to allow the user to see what his/her changes will look like before saving.</p>
  
  <p>I have a plunker that illustrates the problem i'm having.  Type into one input and none of the other inputs will update until you save.  I would like them all to stay in sync as the user types.</p>
  
  <p><a href="http://jsfiddle.net/dberringer/F7MVB/2/" rel="nofollow">http://jsfiddle.net/dberringer/F7MVB/2/</a></p>
  
  <pre><code>function MyCtrl($scope, $firebase) {
      var ref1 = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
      ref1.$on('value', function () {
          $scope.foo = ref1;
      });
  
      $scope.save1 = function () {
          ref1.$save();
      };
  
      var ref2 = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
      ref2.$on('value', function () {
          $scope.bar = ref2;
      });
  
      $scope.save2 = function () {
          ref2.$save();
      };
  
      $scope.bas = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
      $scope.saveBas = function () {
          $scope.bas.$save();
      };
  
      $scope.biz = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
      $scope.saveBiz = function () {
          $scope.biz.$save();
      };
  }
  </code></pre>
  
  <p>Thanks!!</p>
  
  <p><strong>Update:</strong>
  Sorry.  I should have been more clear.  The fiddle I posted was just a quick and dirty way to illustrate the problem.  Here is a bit more accurate representation of the situation and why being able to propagate changes without saving would be helpful.  I'm trying to figure out if there is a nice out of the box way to propagate changes on one firebase reference to another firebase reference without requiring the user save the data to firebase.  Perhaps there is a method or an event that I need to fire to tell all the references to update to match a .  That would be sweet.</p>
  
  <p>As you can see all my model logic is in the myModel factory.  My controllers are nice and thin.  The my-things directive may or may not exist on any given page so the directive accesses the model directly rather than via scope from the controller.  My controllers don't need to inject a bunch of models for directives that they may or may not need.  Going this route has felt very clean and natural when working with firebase.  If this is not possible do folks have another way of rigging up a model, interacting with a firebase resource, that would facilitate this?  Thanks again!</p>
  
  <p><a href="http://jsfiddle.net/dberringer/F7MVB/5/" rel="nofollow">http://jsfiddle.net/dberringer/F7MVB/5/</a></p>
  
  <pre><code>angular.module('myApp',['firebase'])
      .factory('myModel', function ($q, $firebase) {
          var fbRef = $firebase(new Firebase("https://fiddler.firebaseio.com/"));
          return {
              getThings: function (id) {
                  var deferred = $q.defer(),
                      ref1 = fbRef.$child(id);
  
                  // Resolves the promise once the data is loaded from firebase
                  ref1.$on('loaded', function (data) {
                      deferred.resolve(ref1);
                  });
  
                  return deferred.promise;
              }
          }
      })
  
      .directive('myThings', function (myModel) {
          return {
              template:   '&lt;div&gt;Hello, {{thingsListB.thing1}}!&lt;/div&gt;',
              restrict: 'A',
              scope: {
                  elemId: '@myThings'
              },
              link: function postLink(scope, iElement, iAttr) {
                  myModel.getThings(scope.elemId).then(function (things) {
                      scope.thingsListB = things;
                  });
              }
          }
      })
  
      .controller('myCtrl1', function($scope, myModel) {
          myModel.getThings('test1').then(function (things) {
              $scope.thingsListA = things;
          });
  
          // Something like this might do the trick
          // $scope.$watch('thingsListA', function () {
          //  $scope.thingsListA.$heyIChanged();
          // });
      })
  
      .controller('myCtrl2', function($scope) {
          $scope.foo = 'foo';
      });
  </code></pre>