Make items to disappear when clicking elsewhere - html

Question

I've the following HTML NavBar:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom" style="margin-bottom : 0px;">
<div class="container-fluid" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <span ng-show="userCart.cart_size>0" style="color:orange">({{userCart.cart_size}}) </span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">XYZ IoT</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden">
</li>
<li class="page-scroll">
Products
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<!-- Add the Login Anchor -->
<li ng-if="!userInfo.authorization">
Login
</li>
<li ng-if="userInfo.authorization">
My Devices
</li>
<li ng-if="userInfo.authorization">
Logout
</li>
</ul>
</div>
</div> <!-- /.navbar-collapse -->
</nav>
The problem is : When the compressed Nav appears, and I click on it, the menu items appear -- so far fine. But as soon I click else where, the menu stays as is. I have to click on the Menu (3 lines) to make menu items to disappear.
Can it be accomplished? I'm using bootstrap