ons-popover 内で ons-scrollerが使えない

ons-popover内にons-listを使用していくつかの機能を提供する、ドロップダウンメニューを作っています。　メニューの項目数が多いので、ons-scrollerでスクロールさせたいのですが、スクロールが機能せず、一部分のみしか表示されません。低い解像度の端末でも表示できるよう、スクロール機能を付けたいのですが、どのようにすればよいのでしょうか？

ons.bootstrap();
ons.ready(function(){
  onReady();
});

function onReady(){
  ons.createPopover("PopOver.html");
}

function PopOverShowBtn(Target){
  var options={
    animation : "none"
  };
  PopOver.show(Target,options);

}

<ons-navigator var="app_navi">

  <ons-page id="TopPage">
    <ons-button onclick="PopOverShowBtn(this);">ポップオーバー表示</ons-button>
  </ons-page>
</ons-navigator>

<ons-template id="PopOver.html">
  <ons-popover var="PopOver" cancelable style='width:300px'>
    <ons-scroller style="width:100%;height:400px;">
      <ons-list style="text-align:center">
        <ons-list-item modifier='tappable'>項目１</ons-list-item>
        <ons-list-item modifier='tappable'>項目２</ons-list-item>
        <ons-list-item modifier='tappable'>項目３</ons-list-item>
        <ons-list-item modifier='tappable'>項目４</ons-list-item>
        <ons-list-item modifier='tappable'>項目５</ons-list-item>
        <ons-list-item modifier='tappable'>項目６</ons-list-item>
        <ons-list-item modifier='tappable'>項目７</ons-list-item>
        <ons-list-item modifier='tappable'>項目８</ons-list-item>
        <ons-list-item modifier='tappable'>項目９</ons-list-item>
        <ons-list-item modifier='tappable'>項目１０</ons-list-item>
        <ons-list-item modifier='tappable'>項目１１</ons-list-item>
        <ons-list-item modifier='tappable'>項目１２</ons-list-item>
        <ons-list-item modifier='tappable'>項目１３</ons-list-item>
        <ons-list-item modifier='tappable'>項目１４</ons-list-item>
        <ons-list-item modifier='tappable'>項目１５</ons-list-item>

      </ons-list>
    </ons-scroller>
  </ons-popover>
</ons-template>