Infinite scrolling does not allow scrolling first result in angular js

I used infinite scrolling on the div which is below

<div ng-app='myApp' ng-controller='DemoController'>
  <div id="scroll" infinite-scroll='reddit.nextPage()' 
  infinite-scroll-disabled='reddit.stopscript'   infinite-scroll-distance='2'   
    style="height:500px;overflow-y:scroll; border:solid 1px black">             

  <div ng-repeat='item in reddit.items'>
      <span>{{item.CourseId}}</span>
      <span>{{item.Name}}</span>
  </div>
<div ng-show='reddit.busy'>Loading data...</div>

      

        
        
        
      

    

and my controller code

var myApp = angular.module('myApp', ['infinite-scroll']);

 myApp.controller('DemoController', function ($scope, Reddit) {
$scope.reddit = new Reddit();
});

 // Reddit constructor function to encapsulate HTTP and pagination logic
    myApp.factory('Reddit', function ($http) {
   var Reddit = function () {
    this.items = [];
    this.busy = false;
    this.after = '';
    this.counter = 30;
    this.index = 0;
    this.stopscript = false;
};

Reddit.prototype.nextPage = function () {
    if (this.busy) return;
    this.busy = true;

    var url = "http://byui.demo.emsicareercoach.com/packets/coursesearch/?Limit=" +         this.counter + "&Offset=" + this.index + "&Search=&x-ResponseType=json&x-Password=944c8e5971db726e0a516f3c6fa2eb922c5a79bb732975421b7f2bf52acce51f";
    $http.get(url).success(function (data) {

        if (data.Results.length == 0) {

            this.stopscript = true;
        }
        else {               
            this.items.push.apply(this.items, data.Results);
            this.index = this.index + this.counter;              
        }
        this.busy = false;
    }.bind(this));
};

return Reddit;

      

        
        
        
      

    

});

this works fine when my browser is minimized, but when my browser is maximized it shows the first thirty records, after which it doesn't hit that ajax call function again. i used infinite scroll-distance = '2' and even gave the height to my div, but still it doesn't show the scroll on the maximized webpage, hence doesn't work. Help help