How to combine navbar, dropdown and collapse in AngularStrap - angularjs

Question

I have a quite typical scenario:
AngularJS (currently 1.2, want to upgrade to 1.3/1.4 soon)
Bootstrap 3.x
AngularStrap 2.1.x
As top-level menu I place a navbar with some dropdown menus and I'd like it to be collapsable for smaller devices (tablet portrait, phone).
<div class="navbar navbar-inverse navbar-fixed-top"
ng-controller="MenuCtrl" bs-navbar>
<div class="container-fluid" bs-collapse start-collapsed="true">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
bs-collapse-toggle>
<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="#">ACME</a>
</div>
<div class="navbar-collapse collapse" bs-collapse-target>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown" bs-dropdown>
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
id="tst-dropdown-session">
Session <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
(Of course above code is reduced compared to my real code)
The problem is: when clicking on the top-menu item, only a small dropdown shows up (~10px height) without sub-menu items.
Does anybody have a working example for this?
I could manage the menu items in a model of the controller, but how does "collapse" work then? Any ideas?
Edit (add pictures)
On narrow devices it should not look like this:
But it should more like this:

Answer 1

Define your menu items in controller.
And use it your html template as follows
HTML code
<li>Home</li>
<li class="dropdown" bs-dropdown="dropdownHtml">
<a href="#" class="dropdown-toggle"
id="tst-dropdown-session">
Session <b class="caret"></b>
</a>
</li>
Controller code
$scope.dropdownHtml = [
{
text: "Login",
href: '#/login',
title: 'Log out'
},
{
text: "Logout",
href: '/api/auth/logout',
title: 'Log out'
}
];