title: Vertical scrolling not working in Ionic
body: <p>I have two <code>ion-scroll</code> elements on my page, the top one scrolls horizontally, below it is a list that should scroll vertically.</p>
  
  <p>The problem is it doesn't. It just bounces back to the top of the list.</p>
  
  <p>Example: <a href="http://codepen.io/CaffGeek/pen/LEVdVY">http://codepen.io/CaffGeek/pen/LEVdVY</a></p>
  
  <p>I have found that if I set a height on the vertical ion-scroll it 'works' but this needs to work on multiple devices and I don't know what height to use. I'd prefer to not have to watch events, and recalculate the height each time. Anybody know how to fix this?</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;html ng-app="ionicApp"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;title&gt;Ionic List Scroll Bug&lt;/title&gt;
  
      &lt;link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet"&gt;
      &lt;script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MyCtrl"&gt;
  
      &lt;header class="bar bar-header bar-positive"&gt;
        &lt;h1 class="title"&gt;Ionic List Scroll Bug&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;ion-content class="has-header"&gt;
          &lt;ion-scroll delegate-handle="calendarScroll" direction="x"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col col-20" ng-repeat="day in payPeriod.days"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col"&gt;{{day.name}}&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col"&gt;{{day.number}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ion-scroll&gt;
  
          &lt;ion-scroll delegate-handle="taskScroll" direction="y"&gt;
              &lt;ul class="list"&gt;
                  &lt;li class="list-item" ng-repeat="task in tasks"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col col-80"&gt;
                              &lt;p&gt;{{task.name}}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="col col-20"&gt;
                              &lt;label class="item item-input"&gt;
                                  &lt;input type="text" placeholder="Hours" ng-value="task.time" /&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/ion-scroll&gt;
    &lt;/ion-content&gt;
  
      &lt;ion-footer-bar align-title="right" class="bar-stable"&gt;
          &lt;div class="buttons"&gt;
              &lt;button class="button"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
          &lt;h1 class="title"&gt;Total hours 0.00&lt;/h1&gt;
      &lt;/ion-footer-bar&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre><code>angular.module('ionicApp', ['ionic'])
  
  .controller('MyCtrl', function($scope) {
    $scope.payPeriod = {
              days: [{ name: 'Mon', number: 3 }, { name: 'Tue', number: 4 }, { name: 'Wed', number: 5 },
                  { name: 'Thu', number: 6 }, { name: 'Fri', number: 7 }, { name: 'Sat', number: 8 }, { name: 'Sun', number: 9 }]
          };
    $scope.tasks = [
      {name: 'task 1', time: 1.0 },
      {name: 'task 2', time: 3.0 },
      {name: 'task 3', time: 2.0 },
      {name: 'task 4', time: 1.0 },
      {name: 'task 5', time: 2.0 },
      {name: 'task 6', time: 1.0 },
      {name: 'task 7', time: 1.0 },
      {name: 'task 8', time: 2.0 },
      {name: 'task 9', time: 1.0 },
      {name: 'task 0', time: 1.0 }
    ];
  });
  </code></pre>