Angular UI multi-level Dropdown Toggle

Question

I'm trying to use the Angular UI Dropdown Toggle to create a multi-level / nested drop down.

When I click on the first level of the dropdown it simply closes up altogether and does not reveal the second tier.

I've attached a very basic plunkr to demonstrate a bare bones version of what I'm trying to achieve.

http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info

Any help, greatly appreciated.

Thanks

Answer 1

Sub-menu has been removed from Boostrap 3 as it is deemed irrelevant for mobile.

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

An example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684

Code from StackOverflow post: Bootstrap 3 dropdown sub menu missing

Answer 2

You can use the class "dropdown-submenu" to achieve this.

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>