ionic-framework: Can't place InfiniteScroll inside custom component

I would like to create a custom component and place infinite scroll inside of it.

So instead of this:

<ion-content>

 <ion-list>
   <ion-item *ngFor="#i of items"></ion-item>
 </ion-list>

 <ion-infinite-scroll (infinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

I would like to create a custom <my-list> component and do this:

<ion-content>
  <my-list></my-list>
</ion-content>

This doesnt work. Instead I get this error message: browser_adapter.ts:73 ORIGINAL EXCEPTION: No provider for Content! (InfiniteScroll -> Content)

Maybe InfiniteScroll needs to be able to look for ion-content in its parent/ancestor components?

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.1.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.6 Ionic CLI Version: 2.0.0-beta.25 Ionic App Lib Version: 2.0.0-beta.15 ios-deploy version: 1.8.6 ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v5.5.0 Xcode version: Xcode 7.3 Build version 7D175