ngInfiniteScroll Service

Infinite Scroll Markup

        <table>
            <thead>
                <th>ID</th>
                <th>Title</th>
                <th>Creator Email</th>
                <th># of Users</th>
                <th># of Photos</th>
                <th>Privacy Type</th>
                <th>View Images</th>
            </thead>
            <tbody infinite-scroll="albums.nextPage()"
                    infinite-scroll-disabled="albums.busy || albums.next_page === null"
                    infinite-scroll-distance="0">
                <tr data-ng-repeat="item in albums.items track by item.id | filter:query" id="{{ item.id }}" class="row-{{ $index + 1 }}">
                    <td>{{ item.id }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.creator.email }}</td>
                    <td>{{ item.num_members }}</td>
                    <td>{{ item.num_photos }}</td>
                    <td>{{ item.privacy_type }}</td>
                    <td at-title="View Images">
                        <a href="/albums/{{ item.id }}/images" class="glyphicon glyphicon-picture"></i>
                    </td>
                </tr>
            </tbody>
        </table>
        <div ng-show="albums.busy">Loading data...</div>

infinite-scroll-ctrl

angMod.controller( "AlbumsCtrl", [ "$scope", "API", "UrlHelper", "$filter", "infiniteScroll",
    function ( $scope, API, UrlHelper, $filter, infiniteScroll )
{
    $scope.list = [];
    $scope.albums = new infiniteScroll( "albums" );

    $scope.getAlbumList = function ()
    {
        API.$get( UrlHelper.album.getAll() )
            .success( function ( data )
            {
                $scope.list = data.results;
            } )
            .error( function ( data )
            {
                toastr.error( "Oops, there was an issue retrieving users", "Error" );
            } );
    };

} ] );

infinite-scroll-srvc

angMod.service( "infiniteScroll", [ "API", "UrlHelper", "$http",
    function ( API, UrlHelper, $http )
    {
        var infiniteScroll = function( type, reload )
        {
            this.items = [];
            this.busy = false;
            this.after = 1;
            this.type = type;
            this.next_page;
            this.reload = reload;

            if ( this.reload )
            {
                this.next_page = 1;
                this.reload = false;

                this.nextPage();
            }
        };

        infiniteScroll.prototype.nextPage = function()
        {
            if ( this.busy )
            {
                return;
            }

            this.busy = true;

            var url = "API Endpoint, /users or something";

            $http.get( url + "?p=" + this.after )
                .success( function ( data )
                {
                    var items = data.results;

                    for ( var i = 0; i < items.length; i++ )
                    {
                        this.items.push( items[ i ] );
                    }

                    this.next_page = data.next_page;
                    this.after++;
                    this.busy = false;

                    if ( this.next_page === null )
                    {
                        toastr.info( "All results loaded." );
                    }

                }.bind( this ) )
                .error( function()
                {
                    toastr.error( "There was an Error", "Error" );
                } );
        };

        return infiniteScroll;
    }
] );