Ionic Pane Not Scrolling - angularjs

Question

I am very new to ionic but I keep coming across issues, the longer I am working with it. Usually very small issues (luckily), but they are enough to halt me in my tracks.
Anyhow, I have a view that has some images and horizontal scroll content. But if I want to scroll vertically on this app, it just won't work. I have tried adding
<ion-pane overflow-scroll="true">
But to no avail my issue still persist. Does anyone else have any further feedback what I should be looking in to?
<ion-view title="Home" hide-back-button="true">
<ion-pane overflow-scroll="true">
<div class="home-wrapper">
<!--start featured banner-->
<div ng-controller="testCtrl">
<ion-slide-box delegate-handle="theSlider" show-pager="true" does-continue="true" auto-play="true">
<ion-slide ng-repeat="feat in featured">
<h2>{{feat.name}}</h2>
<img ng-src="{{feat.heder_img}}" style="width:100%" />
</ion-slide>
</ion-slide-box>
</div>
<!--end featured banner-->
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<a ng-repeat="bar in bars" href="#/venue/{{bar.id}}"><hcard index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}"></hcard></a>
</hscroller>
</div>
<div ng-controller="restCtrl">
<h4>Top Rated Restaurants</h4>
<hscroller>
<a ng-repeat="restaurant in restaurants" href="#/venue/{{restaurant.id}}"><hcard index="{{$index}}" desc="{{restaurant.name}}" image="{{restaurant.profile_pic}}"></hcard></a>
</hscroller>
</div>
<!-- upcoming 3 events -->
<div ng-controller="test">
<h4>Upcoming Events</h4>
<div class="list">
<div class="item item-divider">Today</div>
<a class="item item-avatar" href="#">
<img src="http://ionicframework.com/img/docs/slimer.jpg">
<h2>Africa Oye</h2>
<p>Come and join our festival</p>
</a>
<a class="item item-avatar" href="#">
<img src="http://ionicframework.com/img/docs/slimer.jpg">
<h2>Creamfields</h2>
<p>Come and join our festival</p>
</a>
</div>
</div>
<!-- upcoming 3 events -->
</div>
</ion-pane>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" ng-click="#">
Home<i class="icon ion-android-home"></i>
</a>
<!-- incluir link da categoria aqui, para ir a venue.html-->
<a class="tab-item" ng-click="#" href="#/home">
Categories<i class="icon ion-ios-list"></i>
</a>
<a class="tab-item" href="#">
Events<i class="icon ion-calendar"></i>
</a>
</nav>
</ion-view>

Answer 1

Simply replace ion-pane with ion-content. ion-pane won't scroll by default because
.pane{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
This will definitely prevent your divs from being scrolled.