AngularJS & Firebase - redraw ng-repeat on change

Question

I have a very simple controller that syncs with my Firebase.

.controller('SchedulesCtrl', ['$scope', '$firebase',
            function($scope, $firebase) {
  var ref = new Firebase("https://blah.firebase.io/schedules/110/2014-10-04/1");
  var sync = $firebase(ref);
  $scope.schedules = sync.$asArray();
}]);

That populates my ng-repeat:

<ul>
    <li ng-repeat="schedule in schedules | orderBy:'start_date_time'" class="class-current class-single scale-fade repeated-item">
        <div class="col-sm-2">
            <div class="class-shortname">{{schedule.class_short_name}}</div>
        </div>
        <div class="col-sm-10 class-name">{{schedule.class_name}}</div>
        <div class="col-sm-5">
            <div class="class-time">
                {{schedule.start_date_time | date: "h:mma"}}-{{schedule.end_date_time | date: "h:mma"}}
            </div>
        </div>
        <div class="col-sm-5">
            <div class="class-instructor">{{schedule.staff_first_name}}</div>
            <div class="class-checkedin">{{schedule.staff_last_name}}</div>
        </div>
    </li>
</ul>

The ng-repeat uses some animation in order to slide in all of my classes. Then data in this Firebase is updated outside of my Angular app and changes are reflected in the app.

These both work just fine and the data updates immedaiately, but I would like my entire ng-repeat to leave and then enter when data changes in Firebase. i.e.

1. Data changes in Firebase
2. The entire ng-repeat leaves with fancy animation
3. The entire ng-repeat re-enters with fancy animation - with the updated data

I've got the data and animation parts down, but how do I tell Angular to leave and enter (these are methods of ngAnimate) my ng-repeat when my Firebase data changes?

Answer 1

You can use $watch to track Firebase data changes.

Just wrap your ng-repeat populating code into a $watch method:

var unwatch = obj.$watch(function() {
  console.log("data changed!");
});

Assigning it to a variable in case you want to release the listener later by calling unwatch()

Taken from the documentation

To assign an animation through ngAnimate to the repopulating of the array, you might need to take a look at the ngAnimate documentation here.