http://sir.co.kr/so_app/278?cpage=1#c_282 에 있는 angular.js 메뉴 ( http://gnavarro77.github.io/angular-vertical-menu/#/basic-usage ) 를 적용 해 봤습니다.

그러나 이것은 메뉴가 아래처럼 컨트롤이 되다 보니..  수정하기가 힘드네요..

[code]

<ons-page style="background-color: white" ng-controller="angularVerticalMenuDemoCtrl as ctrl"

    >

  <vertical-menu config="ctrl.config"></vertical-menu>

</ons-page> 

[/code]

대부분 이런 구조가 dynamic template로 넘어 오다 보니 힘드네요..

아래와 같은 구조에서 하위 list가 컨트롤되는 구조가 되어야 되는데...

[code]

<ons-page style="background-color: white">

 <ons-list class=mtree>

  <ons-list-item><a href="#">Africa</a>

    <ons-list>

      <ons-list-item modifier='chevron'><a href="#">Algeria</a></ons-list-item>

      <ons-list-item modifier='chevron'><a href="#">Marocco</a></ons-list-item>

    </ons-list>

  </ons-list-item>

  <ons-list-item><a href="#">America</a>

    <ons-list>

      <ons-list-item modifier='chevron'><a href="#">North-America</a>

      </ons-list-item>

      <ons-list-item modifier='chevron'><a href="#">Middle-America</a>

      </ons-list-item>

    </ons-list>

  </ons-list-item>

  <ons-list-item modifier='chevron'><a href="#">Arctica</a></ons-list-item>

</ons-list>

</ons-page> 

[/code]