Currently utilizing AngularFire for my project. I wrote some code to add a new record to an array of records and planned on using the promise then function to update the array with the most recent datestamp from the collection.
this.addRecord = function() {
// Adding a new record based on user input
$scope.records.$add({
"date": (new Date()).toString(),
"value": $scope.newValue
}).then(function( ref ) {
// Using underscore.last to determine the newest record
var _newestValue = _.max( $scope.records, function(record) {
return record.date;
})[0].value;
sync.$update({ 'newestValue': _newestValue });
});
// Clearing the input field
$scope.newValue = '';
}
The issue arises when the promise.then() is executed, as my local copy of $scope.records does not reflect the newly added record. While the server-side Firebase has the updated data, I'm unable to access it through iterating $scope.records immediately after adding. After the .then() completes, only then can I see the updated record in the collection.
Could it be that I am misusing the promise? I initially thought that when AngularFire triggers the .then(), it would mean that Angular had already added the record on the server as well as synced the local collection.
What is the correct approach for this scenario? I simply need a reliable way to confirm when the record has been locally added. Thank you!