Firebase - Lazy Loading List of Data - angularjs

Question

I have a requirement where I want to display say the first 10 entries in a list and once the user scrolls down I would like to append the next 10 entries. I am currently using Angularfire and all the documentation specifies that I should not do array operations on a $FirebaseArray:
This array should not be directly manipulated. Methods like splice(), push(), pop(), and unshift() will cause the data to become out of sync with server.
So my options are to load the next 10 entries and:
Use $add(), which would write them to the server again (think this could cause some nasty recursion)
Use concat, in which case my data will get out of sync with the server
Get the list again but adjust the limit to be 20, which I think would cause all the data to be reloaded defeating the purpose of lazy loading.
Here is the code that initially loads the list (based on the Angularfire seed app):
var lastKey = null;
var firstKey = null;
$scope.messages = fbutil.syncArray(userMessages,{'limit':10});
$scope.messages.$loaded(function(data){
lastKey = data.$keyAt(data.length-1);
firstKey = data.$keyAt(0);
});
And here is the code that is triggered when the user scrolls down:
$document.on('scroll', function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
var newMessages = fbutil.syncArray(messagePath,{'limit':10,'startAt':lastKey});
newMessages.$loaded(function(data){
lastKey = data.$keyAt(data.length-1);
firstKey = data.$keyAt(0);
$scope.messages.concat(newMessages);// this is probably a bad idea
});
}
});

Answer 1

Based on Kato's comment the following is the best solution given the current API.
var limit= 10;
$scope.messages = fbutil.syncArray(messagePath,{'limit':limit});
And the scroll trigger
$document.on('scroll', function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
limit += 10;
$scope.messages = fbutil.syncArray(messagePath,{'limit':limit});
}
});