angular bootstrap nav collapse without jQuery

angular bootstrap nav collapse.html

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar"
            ng-click="showdropdown = !showdropdown">
        <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">
        <span><img src="images/logo.png"></span>
        brand
    </a>
</div>
<div id="navbar" class="collapse navbar-collapse" ng-class="{in:showdropdown}">
    <ul class="nav navbar-nav navbar-right" ng-click="showdropdown = false">
        <li ui-sref-active="active"><a ui-sref="index">index</a></li>
        <li ui-sref-active="active"><a ui-sref="about">about</a></li>
        <li ui-sref-active="active"><a ui-sref="portfolio">portfolio</a></li>
        <li ui-sref-active="active"><a ui-sref="solution">solution</a></li>
        <li ui-sref-active="active"><a ui-sref="partners">partners</a></li>
        <li ui-sref-active="active"><a ui-sref="career">career</a></li>
    </ul>
</div>

desc.md

step 1

add ng-click="showdropdown = !showdropdown" to button

step 2

add ng-class="{in:showdropdown}" to navbar

step 3

add ng-click="showdropdown = false" to nav