Demo - Loading Remote Data

Back to All Demos

This demo uses the $http service to load data from the Reddit API as the page scrolls. While an Ajax request is pending, the directive is disabled so it doesn't trigger multiple simultaneous calls to the API.

Important Note: This demo hits the Reddit API, and if you're familiar with Reddit, you know that I cannot guarantee that all the items and outbound links are safe for work. You have been warned!

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='reddit.nextPage()' infinite-scroll-disabled='reddit.busy' infinite-scroll-distance='1'>
    <div ng-repeat='item in reddit.items'>
      <span class='score'>{{item.score}}</span>
      <span class='title'>
        <a ng-href='{{item.url}}' target='_blank'>{{item.title}}</a>
      <small>by {{}} -
        <a ng-href='{{item.permalink}}' target='_blank'>{{item.num_comments}} comments</a>
      <div style='clear: both;'></div>
    <div ng-show='reddit.busy'>Loading data...</div>
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 = '';

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

    var url = "" + this.after + "&jsonp=JSON_CALLBACK";
    $http.jsonp(url).success(function(data) {
      var items =;
      for (var i = 0; i < items.length; i++) {
      this.after = "t3_" + this.items[this.items.length - 1].id;
      this.busy = false;

  return Reddit;

For more details and instructions, please see the documentation.

Scroll Down to Load More Data

{{item.score}} {{item.title}} by {{}} - {{item.num_comments}} comments
Loading data...
In order to be friendly to the Reddit API, this demo is capped at 1000 items.

Download Source
Install with Bower

Select a different version: