creating nested list in the ionic for mobile app

I am developing the mobile app. I want to create a nested list. Can anyone help me out. For e.g. On my first page list is: Food, Beverages. Clicking on food I want to display L1,L2,L3 etc.

How can I achieve that?

Not sure if it is the recommended way but this worked for me

        <ion-list>
            <ion-item nav-clear menu-close ng-click="toggleSubmenu()">Menu 1</ion-item>
            <ion-item nav-clear menu-close ng-show="submenu">
                <ion-list>
                    <ion-item nav-clear menu-close>Submenu 1</ion-item>
                    <ion-item nav-clear menu-close>Submenu 2</ion-item>
                    <ion-item nav-clear menu-close>Submenu 3</ion-item>
                </ion-list>
            </ion-item>
            <ion-item nav-clear menu-close>Menu 2</ion-item>
            <ion-item nav-clear menu-close>Menu 3</ion-item>
            <ion-item nav-clear menu-close>Menu 4</ion-item>
        </ion-list>

You can use the ionic-starter-tabs which illustrates the navigation you are describing. This is a running example from the same source: http://plnkr.co/edit/qYMCrt?p=preview

This behavior is achieved by ui-router, already included with Ionic:

 .state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
})