How to collapse menu with ui bootstrap dropdowns - angularjs

Question

I have the following menu:
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-right">
<li ng-show="isAuthorized(['4TierWeb-Basic User'])">
<a id="home" class="{{selectedMenuTab === 'home' ? 'activeMenu' : ''}}" uib-tooltip="Home" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen5" ng-click="sortTooltipIsOpen5 = !sortTooltipIsOpen5 && isNavCollapsed = !isNavCollapsed" tooltip-enable="!dropdown.isopen5" role="button" aria-haspopup="true" aria-expanded="false" ui-sref="DashboardTemplate.Dashboard">
<span class="material-icons headerIcon home"></span>
</a>
</li>
<li uib-dropdown is-open="dropdown.isopen">
<a id="applicationdropdown" class="{{selectedMenuTab === 'applications' ? 'activeMenu' : ''}}" uib-tooltip="Applications" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen" ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!dropdown.isopen" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon laptop"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="applicationdropdown">
<li ng-repeat="item in applicationsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
</a>
</li>
</ul>
</li>
<li uib-dropdown is-open="dropdown.isopen3">
<a id="billingsdropdown" class="{{selectedMenuTab === 'billings' ? 'activeMenu' : ''}}" uib-tooltip="Billings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen3" ng-click="sortTooltipIsOpen3 = !sortTooltipIsOpen3" tooltip-enable="!dropdown.isopen3" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon monetization_on"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="billingsdropdown">
<li ng-repeat="item in billingsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;">
</span>{{item.heading}}
</a>
</li>
</ul>
</li>
<li uib-dropdown is-open="dropdown.isopen4">
<a id="settingsdropdown" class="{{selectedMenuTab === 'settings' ? 'activeMenu' : ''}}" uib-tooltip="Settings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen4" ng-click="sortTooltipIsOpen4 = !sortTooltipIsOpen4" tooltip-enable="!dropdown.isopen4" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon settings"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="settingsdropdown">
<li ng-repeat="item in settingsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
</a>
</li>
</ul>
</li>
</ul>
</div>
At present, when you click a link it closes the dropdown, but not the entire hamburger, how can I close the menu all the way when somebody clicks a link?
I've tried setting the isNavCollapsed several different ways with no effect.
Partial underlying controller code:
$scope.isNavCollapsed = true;
$scope.settingsMenu = [
{
heading: 'Companies',
route: 'AdminTemplate.AdminTab.Company',
icon: 'business'
},
{
heading: 'User Admin',
route: 'AdminTemplate.AdminTab.UserAdministration',
icon: 'assignment_ind'
},
{
heading: 'User Profile',
route: 'AdminTemplate.AdminTab.UserProfile',
icon: 'account_circle'
}
];
Basically I'm feeding