AngularJS infinite scroll calling API works but not displays new records

I've been trying to implement infinite scroll using AngularJS and my rails backend today. I used jsfiddle (like everyone) http://jsfiddle.net/vojtajina/U7Bz9/

I'm calling API and the requests are made and server returns proper content. No issue here. The thing is, only the first batch or results is displayed. Every other list item is blank (but is still created as the record exist...)

UPDATE:

when I changed my HTML to display divs instead of list items i noticed that each time I scroll to the bottom one new div appears. This is quite strange taking in account that I'm loading 10 records per request...

Here is the code: 

<body ng-app="scroll" ng-controller="Main">
  <div id="fixed" when-scrolled="loadMore()">
    <ul class="unstyled">
      <li ng-repeat="user in users">{{user.first_name}}</li>
    </ul>
  </div>
</body>

function Main($scope, $http) {
  $http.get('/users.json').success(function(data){
    $scope.users = data;
  });

  var counter = 0;
  $scope.loadMore = function() {
    $http.get('/users/page/'+counter+'.json').success(function(data){
        $scope.users.push(data);
    });
    counter += 1;
    console.log($scope.users);
  };
  $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
    });
  };
});

I'm not a JS wizz by any means, so it is possible I have missed something.

You need to change $scope.users.push(data); to $scope.users = $scope.users.concat(data);.

Here when you call $scope.users.push(data); an array is added to the users as an item, so when page 2 is loaded the users has first 10 items + an array as the 11th item. It is not what you want, you want to concatenate the users array with the data array.

function Main($scope, $http) {
    $scope.users = [];

    var page = 1;
    $scope.loadMore = function() {
        $http.get('/users/page/' + page + '.json').success(function(data) {
                    $scope.users = $scope.users.concat(data);
                });
        page += 1;
        console.log($scope.users);
    };
    $scope.loadMore();
}

Demo: Your Case, Solution