When I use ngRouter, navbar is not collapsing - html

Question

When I use ngRouter, navbar is not collapsing after selecting a link in small devices
angilarjs:
var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']);
app.controller("templateCtrl",function($scope){
$scope.navbarCollapsed = true;
});
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/Page1', {
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.when('/Page2', {
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/Page1'
});
}]);
HTML:
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
<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="">Navigation bar</a>
</div>
<!-- nav links for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<ul class="nav navbar-nav nav_width">
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
Please help to fix this issue. Thank you...

Answer 1

Change the code like this:
var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']);
app.controller("templateCtrl",function($scope){
$scope.navbarCollapsed = true;
$scope.collapseNavbar = function () {
$scope.navbarCollapsed = true;
};
});
And the html
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<ul class="nav navbar-nav nav_width">
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
It's adding a function to the scope to force the collapse property to true