Scrolling 2 elements independently?

I tried the above snippet. I’m unable to just apply scroll to the list instead of the entire content. But the list doesn’t scroll properly, it just scrolls through the first few elements.
Snippet :

<content has-header="true" padding="true" scroll="false">
    <button class="button button-block button-positive" ng-click="getMeCarMakes();">
      Get Car Makers
    </button>
    <ul class="list">
      <scroll direction="y">
        <li ng-repeat="data in carMakes" class="item item-icon-left">
          <a>          
            <img src="img/{{data.countryFlag}}" class="icon">
            <h2 class="nameInList">{{data.name}}</h2>
          </a>  
        </li>
      </scroll>      
    </ul>    
  </content>

When I check the markup, below my <ul> , I see the following markup :

<div class="scroll-view ng-isolate-scope" direction="y">

If I add height to this, I’m able to achieve scrolling through the entire list.