How to add "active" class to subheader item when its active

I am trying to add a class to the sub header item when its active, looking at this example: http://codepen.io/anon/pen/mKLgf, clicking on the header item will add “active” class for a second then it just went away. Is that a bug or just it is?

I want the class to say so I can add some css to show which tab is currently on.

Thanks

You can use Ui-Routers ui-sref-active directive.

<a class="tab-item" ui-sref="list"  ui-sref-active="current"></a>

Then make a class

.current{
  background:blue;
  color:white !important;
}

Works perfect. Thanks for that : )