List inside <ion-content> isn't scrolling vertically - ionic-framework

Question

I have the following list inside an ion-content:
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
I just need that list to scroll because I have other elements inside the same which I need them to be static/fixed (with no scroll). This is how the view looks right now:
The red part must not move/no-scroll the blue part is the part I want with scroll, thanks for any help!
The code for the complete html just in case is:
<ion-view id="doctors" view-title="Directorio médico" ng-controller="DoctorsDirController">
<ion-content class="content-dir-medico" scroll="false">
<div class="top-wrapper">
<section class="section-for-bg-img"></section>
<div class="dir-medico-grid-bg-img"></div>
<section ng-class="blurOptionsWrapper ? 'options-wrapper-blurred' : 'options-wrapper'">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CITIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="all-suboption">
<div class="description-and-dropdown-wrapper first">
<h4 ng-class="cityClicked ? 'mark-used' : 'mark-unused'">{{cityName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down" ng-disabled="blurOptionsWrapper"
ng-click="citiesPopover.show($event)">
<script id="popoverCities.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="city in cities | orderBy: 'id'" ng-click="cityClick(city)">
{{city.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SPECIALTIES FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper">
<h4 ng-class="specialtyClicked ? 'mark-used' : 'mark-unused'">{{specialtyName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableSpecialty || blurOptionsWrapper"
ng-click="specialtiesPopover.show($event)">
<script id="popoverSpecialties.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="specialty in specialties | orderBy: 'label'"
ng-click="specialtyClick(specialty)">
{{specialty.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
INSTITUTIONS FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div ng-class="disableInstitutions ? 'disabled-suboption' : 'suboption'" class="all-suboption">
<div class="description-and-dropdown-wrapper last">
<h4 ng-class="institutionClicked ? 'mark-used' : 'mark-unused'">{{institutionName}}</h4>
<div class="buttons">
<button class="button button-icon ion-ios-arrow-down"
ng-disabled="disableInstitutions || blurOptionsWrapper"
ng-click="institutionsPopover.show($event)">
<script id="popoverInstitutions.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<ul>
<li class="item" ng-repeat="institution in institutions | orderBy: 'name' | unique: 'name'"
ng-click="institutionClick(institution)">
{{institution.name}}
</li>
</ul>
</div>
</ion-content>
</ion-popover-view>
</script>
</button>
</div>
</div>
</div>
</section>
</div>
<section class="search-instructions" ng-hide="hideSearchInstructions">
<img src="img/icons/ic_lupaesfera.png" class="search-icon">
<h4>Comienza buscando </br>por ciudad y especialidad</h4>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
RESULTS SHOW ALL DOCTORS, BASED ON CITY & SPECIALTY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<section class="results-area" ng-hide="hideDoctorsResults">
<div class="filter-results-info">
<h5>{{doctors.length}} resultados</h5>
<h6>Filtra resultados seleccionando una institución</h6>
</div>
<ul class="list">
<li class="item" ng-repeat="doctor in doctors" ng-click="displayDetailsFor(doctor)">
<div class="dr-info-wrapper">
<img src="img/icons/ic_persona.png">
<section class="dr-info">
<h3>{{doctor.name}}</h3>
<h4 class="institution">{{doctor.institutions[0].name}}</h4>
<h4 class="address">{{doctor.institutions[0].address}}</h4>
<h4 class="telephone">Telefono {{doctor.institutions[0].telephone}}</h4>
</section>
<span class="ion-ios-information-outline info-icon"></span>
</div>
</li>
</ul>
</section>

Answer 1

I just used another ion-content covering the <ul class="list">and it solved my problem