I'm using AngularJS and Jade with angular-ui-bootstrap to create a dropdown menu within the main navigation, it works perfectly with a wide screen however the problem occurs when on mobile and you have to toggle the menu!
When you click on one of the menu items the navbar closes, so clicking something within the submenu isnt possible!
Mobile Menu (without dropdown Toggled)

Normal Menu

How the mobile menu should look after clicking the dropdown (but the whole menu just closes when you click it)

The Code:
button.navbar-toggle(type='button', ng-click='isCollapsed = !isCollapsed')
span.icon-bar
span.icon-bar
span.icon-bar
.navbar-collapse(ng-class='{collapse: isCollapsed}', ng-init='isCollapsed = true', ng-click='isCollapsed = true')
ul.nav.navbar-nav
li: a(href='/#/') item1
li: a(href='/#/') item2
li(uib-dropdown=true,dropdown-append-to-body=false)
a(href=true,uib-dropdown-toggle=true) Dropdown
ul.uib-dropdown-menu
li: a(href='#/') Item 1
li: a(href='#/') Item 2
li: a(href='/#/') item3
li: a(href='/#/') item4
How can i get it so when i click on the dropdown within the menu it doesnt close the whole thing and instead shows the dropdown?