katowulf/app.js

## app.js
var app = angular.module('app', ['firebase']);

app.controller('ctrl', function($scope) {
  var ref = new Firebase('https://fbutil.firebaseio.com/paginate');
  $scope.scrollItems = $scrollArray(ref, 'number');
});

app.factory('$scrollArray', function($firebaseArray) {
  return function(ref, field) {
    // create a special scroll ref
    var scrollRef = new Firebase.util.Scroll(ref, field);
    // generate a synchronized array with the ref
    var list = $firebaseArray(scrollRef);
    // store the scroll namespace on the array for easy ref
    list.scroll = scrollRef.scroll;

    return list;
  }
});

// just some scroll magic to show the bottom of the list as new records are loaded
app.directive('scrollToBottom', function () {
  var unbind;
  return {
    restrict: 'A',
    scope: { scrollToBottom: "=" },
    link: function (scope, element) {
      if( unbind ) { unbind(); }
      unbind = scope.$watchCollection('scrollToBottom', function () {
        // assumes we have jQuery, which handles the pretty animation
        // otherwise, just use this code instead:
        // element[0].scrollTop = element[0].scrollHeight;
        $(element).animate({scrollTop: element[0].scrollHeight});
      });
    }
  }
});

## index.html
<body ng-app="app" ng-controller="ctrl">

  <h4>Items loaded: {{scrollItems.length}}</h4>

  <p>
      <button class="btn btn-primary"
          ng-click="scrollItems.scroll.next(25)"
          ng-disabled="!scrollItems.scroll.hasNext()">
          Load Next 25
      </button>
  </p>

  <ul class="scrollbox" scroll-to-bottom="scrollItems">
      <li ng-repeat="item in scrollItems">{{item.$id}}: {{item.string}}</li>
  </ul>

</body>
	var app = angular.module('app', ['firebase']);

	app.controller('ctrl', function($scope) {
	var ref = new Firebase('https://fbutil.firebaseio.com/paginate');
	$scope.scrollItems = $scrollArray(ref, 'number');
	});

	app.factory('$scrollArray', function($firebaseArray) {
	return function(ref, field) {
	// create a special scroll ref
	var scrollRef = new Firebase.util.Scroll(ref, field);
	// generate a synchronized array with the ref
	var list = $firebaseArray(scrollRef);
	// store the scroll namespace on the array for easy ref
	list.scroll = scrollRef.scroll;

	return list;
	}
	});

	// just some scroll magic to show the bottom of the list as new records are loaded
	app.directive('scrollToBottom', function () {
	var unbind;
	return {
	restrict: 'A',
	scope: { scrollToBottom: "=" },
	link: function (scope, element) {
	if( unbind ) { unbind(); }
	unbind = scope.$watchCollection('scrollToBottom', function () {
	// assumes we have jQuery, which handles the pretty animation
	// otherwise, just use this code instead:
	// element[0].scrollTop = element[0].scrollHeight;
	$(element).animate({scrollTop: element[0].scrollHeight});
	});
	}
	}
	});
	<body ng-app="app" ng-controller="ctrl">

	<h4>Items loaded: {{scrollItems.length}}</h4>

	<p>
	<button class="btn btn-primary"
	ng-click="scrollItems.scroll.next(25)"
	ng-disabled="!scrollItems.scroll.hasNext()">
	Load Next 25
	</button>
	</p>

	<ul class="scrollbox" scroll-to-bottom="scrollItems">
	<li ng-repeat="item in scrollItems">{{item.$id}}: {{item.string}}</li>
	</ul>

	</body>