[Feature request] Example of dropdown menu items in <nav> menu, working example in issue post, feedback needed

Feature request:

The navbar/menu has no demo, example or mention. No sorry, it does have a mention but without any dropdown links as we can find in the popular bootstrap 3 docs page. So I thought, let's just use the bootstrap 3 docs example as a guide to implement dropdown menu items. Ofcourse, that would be too easy ;-). Using that the menu's didn't work...

Solution? Well, after scratching my head a couple of times I did the following (see code below - which is by no means perfect, so if you have suggestions... please let me know / share them!):

Used the normal navbar example from https://angular-ui.github.io/bootstrap/#!#collapse. So far so good, that part was easy.
Combined it with button dropdown functionality as showcased in there from the example on https://angular-ui.github.io/bootstrap/#!#dropdown. The key here was to use uib-dropdown on-toggle as well as ui-dropdown-toggle and uib-dropdown-menu, see code below.
And thus ended up with code shown below (which you can also find in commit a139ff8e90470b99125cafc67812d753 at the repo github.com/aredfox/todo-angularjs-typescript).

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">ToDoSth</a>
    </div>
    <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
        <ul class="nav navbar-nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li uib-dropdown on-toggle="toggled(open)">
                <a href id="simple-dropdown" uib-dropdown-toggle>Link 3 <span class="caret"></span></a>
                <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                    <li><a href="#">SubItem 1</a></li>
                    <li><a href="#">SubItem 2</a></li>
                    <li><a href="#">SubItem 3</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">SubItem 4</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li uib-dropdown on-toggle="toggled(open)">
                <a href id="simple-dropdown" class="nav-text" uib-dropdown-toggle>Signed in as John Doe <span class="caret"></span></a>
                <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                    <li><a href="#">Profile</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

So that's it? Well, as I mentioned before, I don't know! It's just my take at it, and for now, it works reliably on all browsers I could test. I however don't know if it's the right solution, so if anyone has a better solution, please let me know!

Steps to reproduce the issue:

Read article at https://www.linkedin.com/pulse/angularjs-uibootstrap-dropdown-buttons-nav-menu-yves-schelpe Clone repo https://github.com/aredfox/todo-angularjs-typescript and run npm install && npm start, it will listen on localhost:9000.

Version of Angular, UIBS, and Bootstrap

Angular: 1.6.1

UIBS: 2.5.0

Bootstrap: 3.3.7

angular-ui / bootstrap