Ionic Angular JS $routeProvider loading ion-list won't scroll

Issue

I have an ion-content tag with ng-view which is pulling in partials using a routeProvider. Each partial is loading a list from an XML API and this is all working flawlessly, except the lists are completely unscrollable.

I've tried using ion-scroll (which works, but when you release, it scrolls back to the top of the list), as well as scroll="true" and overflow-scroll="true".

Nothing works. Here's some code:

<ion-header-bar class="bar-stable">
    <label class="item-input-wrapper header">
        <i class="icon ion-android-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="search.$" />
    </label>
</ion-header-bar>
<ion-content class="has-header" data-ng-view overflow-scroll="true"></ion-content>

And here's an example of a partial (They all follow exactly the same structure.)

<ion-list>
    <ion-item data-ng-repeat="route in routes | filter:search" data-ng-click="showRoute(route)">{{route._title}}</ion-item>
</ion-list>

Here is the script:

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'partials/route-list.html',
            controller: 'RouteListController'
        })
        .when('/route', {
            templateUrl: 'partials/stop-list.html',
            controller: 'StopListController'
        })
        .when('/stop', {
            templateUrl: 'partials/prediction.html',
            controller: 'PredictionController'
        });
    });

Testing on iPhone 4S Simulated. Any advice would be appreciated.

Thanks

Solution

Try putting a div with the ng-view directive inside ion-content

<ion-content class="has-header">
  <div data-ng-view></div>
</ion-content>

Answered By - user4100003