Cannot scroll content Onsen UI / AngularJS

Question

I have just started working with AngularJS and I am trying to get my head around it. I seem to have picked up a lot of bad habits from jQuery. I have a simple mobile page written using Onsen UI / AngularJS and jQuery. The content I want is being displayed correctly, however I am unable to scroll through the content to the end. My HTML Code for the page is as follows

    <ons-navigator title="Navigator" var="appNavigator">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-button style="background-color: white;color: #d00052;"
                            ng-click="appNavigator.resetToPage('home.html', options);"><i class="fa fa-home fa-2"></i>
                </ons-button>
            </div>
            <div class="center">Notice Board</div>
            <div class="right">
                <ons-button style="background-color: white;color: #d00052;"
                            ng-click="appNavigator.resetToPage('login.html', options);"><i
                        class="fa fa-power-off fa-2"></i></ons-button>
            </div>
        </ons-toolbar>
<ons-scoller>
        <ons-list ng-controller="MyCtrl">
            <div ng-repeat="group in groups" style="z-index: 9999;">
                <ons-list-item ng-click="toggleGroup(group)" class="title" ng-class="{active:isGroupShown(group)}">
                    <ons-icon icon="minus-square-o" ng-if="isGroupShown(group)"></ons-icon>
                    <ons-icon icon="plus-square-o" ng-if="!isGroupShown(group)"></ons-icon>
                    <b>{{group.title}}</b>
                </ons-list-item>
                <ons-list-item class="item-accordion" ng-show="isGroupShown(group)">
                    <p style="line-height: 22px;" ng-bind-html="group.content">...</p>
                </ons-list-item>
            </div>
        </ons-list>
</ons-scoller>
    </ons-page>
</ons-navigator>

My controller for this page is as follows

    app.controller('MyCtrl', function($scope) {
    $scope.groups = [];
    $.ajax({
        type: 'GET',
        url: 'https://mywebsite/service?mode=data',
        dataType: 'jsonp',
        timeout: 5000,
        success: function(data) {
            $scope.groups = data;
            $scope.$apply();
        },
        error: function(data) {
            $scope.error = true;
            $scope.$apply();
        }
    });



    $scope.toggleGroup = function(group) {
        if ($scope.isGroupShown(group)) {
            $scope.shownGroup = null;
        } else {
            $scope.shownGroup = group;
        }
    };
    $scope.isGroupShown = function(group) {
        return $scope.shownGroup === group;
    };

});

I figured that since html code makes use of ons-scroller - it would scroll properly (on an iPhone) but it doesn't. I compile the app using PhoneGap Build on version 3.5.0. What am I missing here? I would be very grateful for any advice or guidance.

Answer 1

You might just have a typo there.

Change from <ons-scoller>...<ons-scoller> to <ons-scroller>...<ons-scroller>