InfiniteScrolling | small library to quickly and easily add infinite | Form library

I'm attempting to implement infinite scrolling as documented here: https://material.angularjs.org/latest/demo/virtualRepeat

However, all the examples I've found use $http.get to request an external .json document. I want to use an existing JSON array stored in a scope retrieved by another function within the controller. To simplify things for testing purposes, I created a plunkr that only performs the basics.

Here's a working example I found using an external .json file: http://plnkr.co/edit/e32qVQ4ECZBleWq2Gb2O?p=preview

All I should need to do is replace the $http.get request code with my $scope.items, but I have been unsuccessful in my attempts. Here's my modified example that I've been working off of: http://plnkr.co/edit/S2k6pxJ2mZ7MQsILnmvS?p=preview

I've followed the tutorial here, to the letter: http://www.meteorpedia.com/read/Infinite_Scrolling and the result is as intended by the author of the tutorial, i.e. that the infinite scrolling shows the first data (old) in the collection to the last (latest), from top to bottom.

The problem is: The place where I want to implement the infinite scroll is in a newsfeed, much like the one found in Facebook, which shows the most recent (latest) data from the collection first, and when you scroll down, the older data will be added.

I've tried to use createdAt:-1 to sort the data backwards, but a funny thing happened:

Upon refresh, the newsfeed will show the first 3 old data (because I put 3 as the limit), and then when I scroll down, another 3 set of data (newer not latest) will be appended at the TOP of the old data, and this pattern continues until the data fully loaded on screen. What I want to achieve is similar to Facebook's Newfeed i.e. the newsfeed shows the latest/recent data at the top, and as the user scrolls down, older data gets called and added to the client. The code is as provided below:

statusBox.html(client)