nextPage and prevPage not automatically enabling until after scroll

My DOM

<div class="tray" ng-show="vm.isLoggedIn">
    <div class="instruction" ng-show="vm.widgets.length===0">
        Click <i class="fa fa-caret-square-o-down"></i> to add to your Tray
    </div>
    <div class="sly" ng-show="vm.widgets.length>0">
        <button class="btn btn-sm btn-link pull-left" id="prevPage">
            <i class="fa fa-chevron-left"></i>
        </button>
        <div class="widgets">
            <div class="slyFrame">
                <ul class="slidee">
                    <li ng-repeat="w in vm.widgets">Item {{$index}}</li>
                    <!--<li>Watchers: {{vm.watchCount}}</li>-->
                </ul>
            </div>
        </div>
        <button class="btn btn-sm btn-link pull-right" id="nextPage">
            <i class="fa fa-chevron-right"></i>
        </button>
    </div>
</div>

My CSS

.tray {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(34, 34, 34, 1);
    padding: 5px;
    z-index: 1051;
}

.tray .instruction {
    color:#787878;
    line-height: 30px;
    text-align:center;
}

.tray .sly {
    position: relative;
}

.tray .widgets {
    position: absolute;
    top: 0px;
    left: 35px;
    right: 35px;
}

.tray .slyFrame {
    width: 100%;
    height: 30px; 
    padding: 0;
}

.tray .slyFrame .slidee { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    list-style: none; 
}

.tray .slyFrame .slidee li { 
    float: left; 
    margin: 0 5px 0 0; 
    padding: 0;
    width: 80px; 
    height: 100%; 
    color: #CCC;
    background-color: #333; 
    text-align: center; 
    line-height: 30px; 
    border-radius:4px;
}

.tray #prevPage {
    color: #FFF;
}

.tray #nextPage {
    color: #FFF;
}

My JS (Used in Angular module)

var frame =  $(element).find('.slyFrame').eq(0);

var sly = new Sly(frame, {
    horizontal: true,
    itemNav: 'basic',
    activateOn: 'click',
    smart: true,
    mouseDragging: true,
    touchDragging: true,
    releaseSwing: true,
    scrollBy: 1,
    speed: 300,
    prevPage: '#prevPage',
    nextPage: '#nextPage'
}, {
    load: function(){
    },
    active: function(e, index){
    }
}).init();

scope.$watch(function() {
    return ctrl.widgets;
}, function(data) {
    sly.reload();
}, true);

$(window).resize(function(e) {
    sly.reload();
});

darsain / sly

nextPage and prevPage not automatically enabling until after scroll #161