angularjs ui-router is current state active

Question

I'm creating a menu in controller.

$scope.menu = [
    {
        "title": "Home",
        "state": "app.home",
        "active": $state.is("app.home")
    },
    {
        "title": "Product",
        "state": "app.product",
        "active": $state.is("app.product")
    },
    {
        "title": "Category",
        "state": "app.category",
        "active":  $state.is("app.category")
    }
]

I set a property to specify active state. If my state is current, active property will be true.

        <ul class="nav nav-pills nav-stacked">
             <li ng-repeat="item in menu" ng-class="{active:item.active}">
                <a ui-sref="{{item.state}}"> {{item.title}}</a>
            </li>
        </ul>

But when I change state, active property is not firing.

Answer 1

Your suggested solution correction:

<ul class="nav nav-pills nav-stacked">
             <li ng-repeat="item in menu" ng-class="{active: $state.is('stateName')}">
                <a ui-sref="{{item.state}}"> {{item.title}}</a>
            </li>
 </ul>

Or you may simply use ui-sref-active :

Example

Given the following template:

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
</ul>

When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins", the resulting HTML will appear as (note the 'active' class):

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
</ul>

The class name is interpolated once during the directives link time (any further changes to the interpolated value are ignored).

Multiple classes may be specified in a space-separated format:

<ul>
  <li ui-sref-active='class1 class2 class3'>
    <a ui-sref="app.user">link</a>
  </li>
</ul>