title: How to have data update without page reload from firebase
body: <p>I am trying to implement a simple favorites system. On the page load posts are listed on the home page and any previously favorited posts called nubs will show up with the FAVED tag underneath them.</p>
  
  <pre><code>&lt;div class="list-group" ng-repeat="nub in nubs"&gt;
    &lt;a href="#" class="list-group-item active"&gt;
      &lt;h4 class="list-group-item-heading"&gt;{{nub.title}}&lt;/h4&gt;
      &lt;p class="list-group-item-text"&gt;{{nub.description}}&lt;/p&gt;
      &lt;p class="list-group-item-text"&gt;{{nub.synopsis}}&lt;/p&gt;
      &lt;li ng-repeat="url in nub.attachmentsUrls"&gt;
        &lt;p class="list-group-item-image"&gt;
          &lt;img ng-src={{url}} /&gt;
        &lt;/p&gt;
      &lt;/li&gt;
    &lt;/a&gt;
    &lt;button ng-click="toggleFav(nub)"&gt;favorite&lt;/button&gt;
    &lt;p ng-show="getFaved(nub.$id)"&gt;FAVED&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is working but when I add something to my favorites the page doesn't update to reflect the newly favorited post. I would like to make my page respond actively to the toggleFav function. </p>
  
  <p>Here is my controller</p>
  
  <pre><code>var ref = new Firebase("https://xxxxx.firebaseio.com");
  var auth = ref.getAuth();
  
  var nubRef = new Firebase("https://xxxxx.firebaseio.com/Nubs");
  var nubs = $firebaseArray(nubRef);
  $scope.nubs = nubs;
  
  var userRef = new Firebase("https://xxxxx.firebaseio.com/users");
  var users = $firebaseArray(userRef);
  $scope.users = users;
  
  // Array of booleans for favorites
  $scope.favedArray = [];
  
  // Array of user ids for 
  $scope.userIdArray = [];
  
  var userFavs = $firebaseArray(userRef.child(auth.uid).child("favorites"));
  $scope.userFavs = userFavs;
  
  userFavs.$loaded()
  .then
  (
    function()
    {
      nubs.$loaded()
      .then
      (
        function()
        {
          $scope.tempFaved = [];
          $scope.tempId = [];
          console.log(userFavs);
  
          angular.forEach
          (
            nubs, 
            function(nub)
            {
              $scope.tempFaved.push(false);
              $scope.tempId.push(nub.$id);
              console.log($scope.tempId);
  
              angular.forEach
              (
                userFavs,
                function(favs)
                {
                  console.log($scope.tempFaved);
                  if(favs.nub == nub.$id)
                  {
                    $scope.tempFaved.pop();
                    $scope.tempFaved.push(true);
                    console.log($scope.tempFaved);
                  }
                }
              );
            }
          );
  
          while($scope.tempFaved.length &gt; 0)
          {
            $scope.favedArray.push($scope.tempFaved.pop());
            $scope.userIdArray.push($scope.tempId.pop());
          }
              $scope.getFaved = function(nubId)
                {
                  console.log($scope.favedArray[$scope.userIdArray.indexOf(nubId)]);
                  $scope.faved = $scope.favedArray[$scope.userIdArray.indexOf(nubId)];
                  return $scope.faved;
                }
  
              $scope.toggleFav = function(nub)
                {
                  var nubFavRef = nubRef.child(nub.$id).child("favorites");
                  var nubFavs = $firebaseArray(nubFavRef);
                  var faved = $scope.getFaved(nub.$id)
                  console.log(faved);
                  if (faved == false)
                    {
                      nubFavs.$add
                      (
                        {
                          user: auth.uid
                        }
                      );
                      userFavs.$add
                      (
                        {
                          nub: nub.$id 
                        }
                      )
                    console.log("favorited");
                    }
                  else 
                  {
                    nubFavs.$remove(auth.uid);
                    userFavs.$remove(nub.$id);
                    console.log("unfavorited");
                  }
                };
              }
            )
          }
        );
  </code></pre>
  
  <p>Essentially it is looping through the nubs or posts displayed on the page and checking them against the nubs the user has favorited to display the FAVED tag and toggle the functionality of the favorite button. If the user doesn't have the nub favorited the button will add the nub to their list of favorites as well as adding them to the list of users that have the nub favorited and if the user does have the post favorited it will remove them. </p>
  
  <p>The unfavorite functionality of the toggleFav doesn't work either so help with that would also be appreciated, but that's a matter of being able to access the right child of the faved arrays which I'm not sure how to do. </p>
  
  <p>What I think needs to happen for the page to update with the right information when something is favorited is some kind of $on listener, but I'm not sure how to implement it.</p>