Trigger ngInfiniteScroll correctly when using a scrolling table

Question

I have a table inside a bootstrap-modal which has overflow set to auto so that it scrollable. However I need to load a lot of data so I would like to implement lazy-loading using ngInfiniteScroll. I have tried using the infinite-scroll-container attribute but it's still triggering constantly. Here is a code-snippet:

<div class="modal-body">
    <table class="table" id="msds-table" ng-show="vm.modalViewLoaded" infinite-scroll="vm.log()" infinite-scroll-container='"#msds-table"'
           infinite-scroll-disabled="!vm.modalViewLoaded">
        <thead>
        <tr>
            <th>CODE</th>
            <th>TYPE</th>
            <th>PRODUCT</th>
            <th>ONBOARD</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="sheet in vm.datasheets | filter:onboardQuery | filter: (notOnBoardOnly ? {onboard:false} : {onboard:any})">
            <td>{{sheet.code}}</td>
            <td>{{sheet.type}}</td>
            <td>{{sheet.product}}</td>
            <td>
                <span class="checkbox">
                    <input type="checkbox" data-ng-model="sheet.onboard" data-ng-value="sheet.onboard">
                </span>
                <span data-ng-show="!sheet.onboard">Click to select</span>
                <us-list-select ng-model="sheet.located"
                                data-ng-show="sheet.onboard"
                                options="{list:vm.storageLocations}">
                </us-list-select>
            </td>
        </tr>
        </tbody>
    </table>
    <div ng-show="!vm.modalViewLoaded" style="text-align:center;padding-top:20px;">
        <img src="images/ajax-loader.gif">
    </div>
</div>

Any ideas?