how to syncy in firebase with below code

Question

How to bind these code in firebase and make automatic sync, I want to check the attended invitees

var guestApp = angular.module("guestApp", []);

guestApp.controller('guestCtrl', function($scope) {
    $scope.guests = ['jean','elie','tierry'];
   
  $scope.addGuest = function(){
  $scope.guests.push($scope.newGuest);
  $scope.newGuest = '';

 };
 
 $scope.removeGuest = function(guest){
 var i = $scope.guests.indexOf(guest);
 $scope.guests.splice(i,1);
 };

Answer 1

First, you need to make sure to have those libraries included in your HTML:

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>    
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>

As for the code itself:

1. You need to add firebase module dependency:

   var guestApp = angular.module("guestApp", ["firebase"]);
   

2. Then, in your controller you need to inject proper firebase service and log authenticate:

   guestApp.controller('guestCtrl', function($scope, $firebaseArray) {
       var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/guests");
   

3. After that you can bind a scope variable to your firebase reference:

       $scope.guests = $firebaseArray(ref);
   

4. As for adding new item:

     $scope.addGuest = function(){
         $scope.guests.$add($scope.newGuest);
         $scope.newGuest = '';
     };
   

5. And removing:

    $scope.removeGuest = $scope.guests.$remove;
   

I guess that's it. Btw. you can read all about it in the official documentation ;) https://www.firebase.com/docs/web/libraries/angular/quickstart.html