Change class when changing view

Question

I’m using bootstrap and angular

I have a Nav:

<ul class="nav nav-tabs nav-justified" ng-model="activeVar" style="margin-top:50px;">
            <li role="presentation"><a value="overview" ui-sref="main.admin.shops.single.overview">Übersicht</a></li>
            <li role="presentation"><a value="inventory" ui-sref="main.admin.shops.single.inventory">Produkte</a></li>
            <li role="presentation"><a value="orders" ui-sref="main.admin.shops.single.orders">Bestellungen</a></li>
            <li role="presentation"><a value="settings" ui-sref="main.admin.shops.single.settings">Einstellungen</a></li>
</ul>

Would like to apply to class active when certain option selected. How would you do this? Usage angularjs in my system

Answer 1

Add the directive ui-sref-active, as in the following example:

<li role="presentation" ui-sref-active="active">
    <a value="overview" ui-sref="main.admin.shops.single.overview">Übersicht</a>
</li>