How to make list tag as selected or active by default on page load

Question

I am using ui-sref-active="active" to make the selected <li> tag active but I want a list tag to be active as default out of three list tags

<li ui-sref-active="active" class="item active"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

I want the first list tag to be active by default and then when user clicks on anyother list tag it should deactivate and activate other list tag

I am using this directive: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Answer 1

you can use ng-class to dynamically turn class 'active' on and off.

<li ui-sref-active="active" ng-class="{active: activeTab1}"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab2}"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab3}"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

In your controller you can switch the activeTab1,2 and 3 on and off based on which list tag the user clicks. You can set activeTab1 true by default.

UPDATED

added {} in ng-class because of the syntax

Here is a working example in Plunker