Botón de navigation Bootstrap 3, de alternar a la list desplegable

Estoy trabajando en una aplicación AngularJS donde uso Bootstrap 3 para diseñar mi navigation ( Navbar ) y esto funciona perfectamente.

Mi headder

 <div class="navbar-header"> <button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings"> <i class="glyphicon glyphicon-cog"></i></button> <a class="navbar-brand text-lt" href="#/dashboard"> <img class="m-mid" ng-src="{{ logo }}" alt="{{ user.organization.name }}"> <span class="hidden-folded ml-xs hide">{{app.name}}</span> </a> </div> <div class="collapse navbar-collapse navbar-settings navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown" dropdown> <a href class="dropdown-toggle" dropdown-toggle> {{lang.name}} <b class="caret"></b> </a> <ul class="dropdown-menu"> <li ng-repeat="lang in langs"> <a class="pt-sm pb-sm" ng-click="setLang(lang.key)"> {{lang.name}} </a> </li> </ul> </li> <li class="dropdown" dropdown> <a href class="dropdown-toggle" dropdown-toggle> <span class="thumb-sm avatar pull-right"> <img class="block" ng-src="{{ user.image_path }}" alt="..."> <i class="on md b-white bottom"></i> </span> {{name} <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#/setting"></a></li> <li><a href="#/profile"></a></li> <li><a href="#/help"></a></li> </ul> </li> </ul> </div> 

En este momento, cuando está en el dispositivo mobile, aparece el button en el navbar-header la navbar-header que se comporta como un toggle , como se esperaba usando la navigation de Bootstraps. Esto significa que el usuario tiene que hacer clic en él para abrirlo, y luego hacer clic nuevamente cuando quiera cerrarlo.

Y en la tableta / computadora de escritorio son dos navbar-collapse desplegables (de navbar-collapse ). Que quiero mantenerlo así.

Mi pregunta es: ¿hay alguna manera, en los mobilees, de que el button se comporte como un menu desplegable en lugar de un button? Entonces, ¿un usuario puede hacer clic en cualquier lugar que quiera y se cierra en lugar de tener que hacer clic en el button?

¿Qué tal este ejemplo?

 var app = angular.module('app', ['ui.bootstrap']); app.controller('menu', function($scope) { $scope.logo = 'http://img.javascriptes.com/javascript/P1BHs.png'; $scope.user = {}; $scope.user.organization = {}; $scope.user.organization.name = "Org test"; $scope.user.image_path = "http://img.javascriptes.com/javascript/venkman.jpg"; $scope.app = {name: "App test"}; $scope.lang = {name: "English"}; $scope.langs = [{key: "EN", name: "English"},{key: "IT", name: "Italian"}]; $scope.name = "user123"; $scope.setLang = function(key) { } $scope.containerClick = function($event) { console.log("containerClick: "+$scope.navCollapsed) $scope.navCollapsed = true; } }); 
 <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="app.js"></script> </head> <body ng-controller="menu"> <div class="navbar-header"> <button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> <i class="glyphicon glyphicon-cog"></i></button> <a class="navbar-brand text-lt" href="#/dashboard"> <img class="m-mid" style="width: 200px" ng-src="{{ logo }}" alt="{{ user.organization.name }}"> <span class="hidden-folded ml-xs hide">{{app.name}}</span> </a> </div> <div class="collapse navbar-collapse navbar-settings navbar-right" uib-collapse="navCollapsed"> <ul class="nav navbar-nav"> <li class="dropdown" uib-dropdown> <a href class="dropdown-toggle" uib-dropdown-toggle> {{lang.name}} <b class="caret"></b> </a> <ul class="dropdown-menu"> <li ng-repeat="lang in langs"> <a class="pt-sm pb-sm" ng-click="setLang(lang.key)"> {{lang.name}} </a> </li> </ul> </li> <li class="dropdown" uib-dropdown> <a href class="dropdown-toggle" uib-dropdown-toggle> <span class="thumb-sm avatar pull-right"> <img class="block img-circle" ng-src="{{ user.image_path }}" alt="..."> <i class="on md b-white bottom"></i> </span> {{name}} <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="#/setting"></a> </li> <li> <a href="#/profile"></a> </li> <li> <a href="#/help"></a> </li> </ul> </li> </ul> </div> <div class="container container-exp" ng-click="containerClick($event)"></div> <footer> <hr /> <center>2016 XYZ. All Rights reserved.</center> </footer> </body> </html>