I've already tried to follow instructions in this question, but I'm stuck, so I had to ask this as a new question.

I am trying to create infinite scroll where a user can see his activities. Only 10 (10 is a hypothetical number here) activities will be shown at a time, so performance will be better.

I created a simple pagination on backend and it works as expected.

/feed/1 -> displays first 10 results (0-10) /feed/2 -> displays 10 more (10-20) /feed/3 -> displays 10 more (20-30)

Since I use $http , I couldn't find a way to mimick it, so I put it here as it is for now. There may be more than one issue here, I tried to be careful, though.

Here's my plunk : http://plnkr.co/edit/DLAMy56jwyeqYdN1kvT3?p=preview

Here's my code.

index.html

<!doctype html> <html lang="en" ng-app="feed"> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> <script src="script.js"></script> </head> <body> <div ui-view></div> <!-- Everything is in template.html --> </body> </html>

template.html

<div class="virtualRepeatdemoInfiniteScroll"> <md-content layout="column"> <md-virtual-repeat-container id="vertical-container" flex> <div md-virtual-repeat="FeedFlow in PostController.data" md-on-demand class="repeated-item" flex> <div ng-repeat="text in FeedFlow.feed"> {{FeedFlow.id}} <!-- whose post is this? --> {{text.status}} <!-- status --> </div> </div> </md-virtual-repeat-container> </md-content> </div>

style.css

.virtualRepeatdemoInfiniteScroll #vertical-container { height: 292px; width: 400px; } .virtualRepeatdemoInfiniteScroll .repeated-item { border-bottom: 1px solid #ddd; box-sizing: border-box; height: 40px; padding-top: 10px; } .virtualRepeatdemoInfiniteScroll md-content { margin: 16px; } .virtualRepeatdemoInfiniteScroll md-virtual-repeat-container { border: solid 1px grey; } .virtualRepeatdemoInfiniteScroll .md-virtual-repeat-container .md-virtual-repeat-offsetter { padding-left: 16px; }

script.js