Can You Append / Prepend to an Already Synced Array?

[pihish]

I have a chat application that runs off of Firebase / AngularFire. When an user clicks on a chat conversation, I run the following to get the last 50 messages between the user and the person he / she is having a conversation with:

var sync = $firebase(ref.orderByChild('timestamp').limitToLast(50));
$scope.sms = sync.$asArray();

The object that houses the conversation between two specific users can have thousands of messages inside of it (each message is a property of that object). If I try to load the entire object, there is massive lag in the browser.

I could lazy fetch older messages as the user scrolls up in his or her chat window by incrementally increasing the number of messages to show if I re-sync my object by calling the following code:

var sync = $firebase(ref.orderByChild('timestamp').limitToLast(messagesToShow));
messagesToShow = messagesToShow + 50;
$scope.sms = sync.$asArray();

But since the DOM elements which represent individual messages are synced to $scope.sms, those elements would disappear temporarily when I re-sync $scope.sms.

Is there anyway to prepend to $scope.sms using something like the limitToLast() method so that I can add more messages to the $scope.sms array without having its existing values erased?

Something akin to unshift() in vanilla JavaScript?

Version info

Angular: 1.5.5

Firebase: 2.2.3

AngularFire: 0.9.2

[puf]

Cross-post: http://stackoverflow.com/questions/43532382/firebase-can-you-append-prepend-to-an-already-synced-array Please indicate when you cross-post, to reduce the chances of somebody spending time when you've already been helped elsewhere.