In AngularFire how to keep track of data is "In flight"? - angularjs

Question

I'm working on chatting application in firebase and angular. When I send message using $scope.send(message) function it's directly upend to $scope.messages array because of three-way binding of angularfire. It's initially stored in locally and sync with server in background. I want to keep track message's status if it's sync with server or not. AngularFire's $push method has callback when it's sync with server. But I'm getting no clue of how to keep track of data is "In flight" ( Not synched with server but added in angular scope variable.)
var Ref = new Firebase('FIREBASE_APP_URL');
var ref = Ref.child('messages');
$scope.messages= $firebaseArray(ref).orderByChild('createdAt').limitToLast(10));
$scope.send = function(message) {
$scope.messages.$add(message).then(function(ref) {
var id = ref.key();
console.log("added record with id " + id);
console.log($scope.messages.$indexFor(id)); // returns location in the array
});
}

Answer 1

The $firebaseArray object is not involved in any three-way data binding. That is limited to $firebaseObjects .bindTo() method.
What happens when you call $add() is that a local child_added event is immediately raised and the $firebaseArray updates its internal data based on that. This is how all Firebase clients work, not just AngularFire, and it is part of why Firebase appears to work instantaneous.
If you want to know when the item was added on the server, you can use the promise that $add() returns. When that promise resolves, the data has been committed on the server.
From the AngularFire documentation for $add():
This method returns a promise which is resolved after data has been saved to the server.
var list = $firebaseArray(ref);
list.$add({ foo: "bar" }).then(function(ref) {
var id = ref.key();
console.log("added record with id " + id);
list.$indexFor(id); // returns location in the array
});