title: Load Next Page in Angular
body: <p>I have the following Angular and HTML code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
    var application = angular.module('Application', []);
  
    application.service('ImageService', function ($http) {
      return {
        GetList: function () {
          return $http.get('api/images');
        },
      }
    });
  
    application.controller('ImageController', function ImageController($scope, ImageService) {
  
      ImageService.GetList()
        .success(function (data, status, headers, config) {
          $scope.images = data;
        })
        .error(function (data, status, headers, config) { });
    });
  
  &lt;/script&gt;
  
  &lt;div data-ng-app="Application" data-ng-controller="ImageController" class="gallery"&gt;
    &lt;div data-ng-repeat='image in images' class="image"&gt;
      &lt;img src="{{image.Url}}" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The API call is returning the following:</p>
  
  <pre><code>[
    {"Key":"89207","Url":"http://somedomain.com/image89207.jpg"},
    {"Key":"12321","Url":"http://somedomain.com/image12321.jpg"},
    {"Key":"23434","Url":"http://somedomain.com/image23434.jpg"}
  ]
  </code></pre>
  
  <p>I would like to load the next page when the user scrolls down to the end of the page or when it clicks a button saying "Show More".</p>
  
  <p>I also need to return on my JSON the NextPage value ... </p>
  
  <p>The point is that if current page is "233" then next page might be "4545".</p>
  
  <p>I think the API might need to return the next page value and a list of images.</p>
  
  <p>How can I do this?</p>