title: Cannot scroll content Onsen UI / AngularJS
body: <p>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</p>
  
  <pre><code>    &lt;ons-navigator title="Navigator" var="appNavigator"&gt;
      &lt;ons-page&gt;
          &lt;ons-toolbar&gt;
              &lt;div class="left"&gt;
                  &lt;ons-button style="background-color: white;color: #d00052;"
                              ng-click="appNavigator.resetToPage('home.html', options);"&gt;&lt;i class="fa fa-home fa-2"&gt;&lt;/i&gt;
                  &lt;/ons-button&gt;
              &lt;/div&gt;
              &lt;div class="center"&gt;Notice Board&lt;/div&gt;
              &lt;div class="right"&gt;
                  &lt;ons-button style="background-color: white;color: #d00052;"
                              ng-click="appNavigator.resetToPage('login.html', options);"&gt;&lt;i
                          class="fa fa-power-off fa-2"&gt;&lt;/i&gt;&lt;/ons-button&gt;
              &lt;/div&gt;
          &lt;/ons-toolbar&gt;
  &lt;ons-scoller&gt;
          &lt;ons-list ng-controller="MyCtrl"&gt;
              &lt;div ng-repeat="group in groups" style="z-index: 9999;"&gt;
                  &lt;ons-list-item ng-click="toggleGroup(group)" class="title" ng-class="{active:isGroupShown(group)}"&gt;
                      &lt;ons-icon icon="minus-square-o" ng-if="isGroupShown(group)"&gt;&lt;/ons-icon&gt;
                      &lt;ons-icon icon="plus-square-o" ng-if="!isGroupShown(group)"&gt;&lt;/ons-icon&gt;
                      &lt;b&gt;{{group.title}}&lt;/b&gt;
                  &lt;/ons-list-item&gt;
                  &lt;ons-list-item class="item-accordion" ng-show="isGroupShown(group)"&gt;
                      &lt;p style="line-height: 22px;" ng-bind-html="group.content"&gt;...&lt;/p&gt;
                  &lt;/ons-list-item&gt;
              &lt;/div&gt;
          &lt;/ons-list&gt;
  &lt;/ons-scoller&gt;
      &lt;/ons-page&gt;
  &lt;/ons-navigator&gt;
  </code></pre>
  
  <p>My controller for this page is as follows</p>
  
  <pre><code>    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;
      };
  
  });
  </code></pre>
  
  <p>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.</p>