Ui-sref-active On An Abstract State

I have these routes: .account /:email .account.home /:email .account.personal /:email/personal .account.settings /:email/settings .account is an abstract state and .account.home

Solution 1:

you have to use ui-sref-active like ng-class

<a 
    ui-sref-active='{"active": ".account({email: account.email})" }' 
    ui-sref='.account.home({email: account.email})'
>

the important part is this:

{"active": ".account({email: account.email})" }

which tells ui-router to set the active class when the current state is .account({email: account.email}) so it is now looking at the abstract state .account and not .account.home