Infinite scroll refreshing the page instead of loading all the data together

I am getting the contents of a page in json and displaying it in my view, but every time a page loads, the loop I have in my view refreshes and displays only the content of the next page.

I want it to display the contents of the first and second, but it’s not doing that.

here is my code

    var i=1; 
    $scope.result=[];
    $scope.noMoreItemsAvailable=false;
   $scope.loadMore = function()
    {
      if(i<3)
      {
        $http.get( "http://test.jobstore.com/api/search/"+i).success(function(response)
        {
          i++; 
          $scope.result=$scope.result.push(response); 
          console.log(response);

          $timeout(function () 
          {
          $scope.result = response
          });

          $scope.$broadcast('scroll.infiniteScrollComplete');
        });
      }else
      {
        $scope.noMoreItemsAvailable=true; 
      }
    }/