I am struggling to ensure my navbar starts collapsed using the code provided below. I am utilizing Angular-ui-bootstrap:
navbar.directive.html:
<button type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div collapse="isCollapsed">
<ul class="nav navbar-nav">
<li>Test</li>
<li>Testing...</li>
</ul>
</div>
navbar.controller.js:
angular.module('gameApp')
.controller('NavbarController', NavbarController);
NavbarController.$inject = ['playersService'];
function NavbarController(playersService) {
var vm = this;
vm.isCollapsed = true;
var getCurrentPlayer = function() {
playersService.getCurrentPlayer().$promise.then(function(data) {
vm.player = data.player;
});
};
var init = function() {
getCurrentPlayer();
};
init();
}
Despite setting vm.isCollapsed = false;, when the page is minimized and the responsive navbar toggle appears, the menu is still displayed by default. Even if changed to false, the menu remains open.