While trying to add scroll buttons, they aren't scrolling Ionic + Angular

My app has a menu of clickable elements.. I can scroll it by swiping the area, but now trying to add some buttons that scroll this ionic element as well..

Problems

  • I click down on the #down button , and nothing happens.

  • Also, my bottom button isn't visible at all.

<button style="width: 100%;margin-top:25px;" id="down" ng-click="scrollDown()" ng-if="isEnabled" aria-label="double tap to scroll down">Scroll Down
</button>

<ion-scroll delegate-handle="myScroll" scrollbar-x="true" scrollbar-y="false" direction="y" has-bouncing="false" style="overflow: scroll; overflow-x: hidden;">

    <div id="content" style="display:inline-block;">
        <div>
            ... //Tons of scrollable stuff
        </div>

</ion-scroll>

<button id="up" style="width: 100%" ng-click="scrollUp()" ng-if="isEnabled" aria-label="double tap to scroll up">Scroll Up
</button>

The Controller

function calculateTopBottom() {
    var currentTop = $ionicScrollDelegate.$getByHandle('myScroll').getScrollPosition().top;
    var maxTop = $ionicScrollDelegate.$getByHandle('myScroll').getScrollView().__maxScrollTop;

    if (currentTop == 0) {
        $('#down').attr('aria-label','double tap to scroll down');
        $('#up').attr('aria-label','Reached top');
    } else if (currentTop >= maxTop) {
        $('#down').attr('aria-label','Reached bottom');
        $('#up').attr('aria-label','double tap to scroll up');
    } else {
        $('#down').attr('aria-label','double tap to scroll down');
        $('#up').attr('aria-label','double tap to scroll up');
    }
}

$scope.scrollDown = function () {
    $ionicScrollDelegate.$getByHandle('myScroll').scrollBy(0, 150);
    $timeout(function () {
        calculateTopBottom();
    }, 200);

};

$scope.scrollUp = function () {
    $ionicScrollDelegate.$getByHandle('myScroll').scrollBy(0, -150);
    $timeout(function () {
        calculateTopBottom();
    }, 200);
};