How to add ui-scroll with remote data in angularjs?

I have an issue with my angularjs. I’m trying to add ui-scroll but when I do that I have this error.

Maybe it’s because the data is not loaded when the html call it.

Error: $injector:unpr

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Unknown provider: datasourceProvider <-
datasource

This is my service

app.factory('actionScroll', function ($http, $timeout,$q) {
    return {
        default: {
            first: 0,
            max: 5,
            delay: 100
        },
        data: [],
        init: function (donne) {
            this.first = this.default.first;
            this.max = this.default.max;
            this.delay = this.default.delay;

            for (var i = this.first; i <= this.max; i++) {
                this.data[i] = {
                    index: i,
                    content: donne[i]
                };
            }
        },

        request: function (index, count) {
            var self = this;
            var deferred = $q.defer();

            var start = index;
            var end = index + count - 1;

            $timeout(function () {
                var item, result = [];
                if (start <= end) {
                    for (var i = start; i <= end; i++) {
                        if (item = self.data[i]) {
                            result.push(item);
                        }
                    }
                }
                deferred.resolve(result);
            }, self.delay);

            return deferred.promise;
        }
    }
})

this is my app.js

$scope.list= function () {
    $http.get(requestURL).then(function (response) {
        actionScroll.init(response.data.Liste)
        $scope.datasource = {
            get: function (index, count, success) {
                console.log('requested index = ' + index + ', count = ' + count);
                actionScroll.request(index, count).then(function (result) {
                    console.log('resolved ' + result.length + ' items');
                    success(result);
                });
            }
        };
    })
}

$scope.list()

This is my html

<ul class="viewport" ui-scroll-viewport>
    <li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
        <span class="title">{{item}}</span>
    </li>
</ul>

>Solution :

Maybe try loading the component only when the data is available / returned from the api:

$scope.list= function () {
    $scope.isDataLoaded= false;
    $http.get(requestURL).then(function (response) {
        $scope.isDataLoaded= true
    ...
})

<ul ng-if="isDataLoaded" class="viewport" ui-scroll-viewport>
    <li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
        <span class="title">{{item}}</span>
    </li>
</ul>