uiSrefActive, substate highlighting with abastract states

[mugenkanosei]

I know uiSrefActive was changed to support substates with #819, but I don't think it is working with a root abstract state. I'm new to UI Router, so this could just be my lack of experience.

I have a view (reporting.html) with a nested view that I wanted to go to a default page (reporting.default.html) on first load. Looking at the docs and the contact example app, I created an abstract state with two substates.

.state('reporting',
{
    url: '/reporting',
    abstract: true,
    templateUrl: 'angular/app/reporting/reporting.html'
})

.state('reporting.default',
{
    url: '',
    templateUrl: 'angular/app/reporting/reporting.default.html'
})

.state('reporting.style1',
{
    url: '/report/{reportId}',
    templateUrl: 'angular/app/reporting/report.style1.html'
})

I have a nav bar with a link like this

<li data-ui-sref-active="active">
    <a data-ui-sref="reporting.default">Reporting</a>
</li>

In the reporting.html page, there is a sidenav to select from a list of reports and a nested ui-view.

When I click on the top nav to go to reporting, the link becomes active and it routes to the default view as I want, but when I click on a link in the sidenav to select a specific report, the topnav link becomes deactivated. I assume this is because the state is now "reporting.style1" and the uiSrefActive is using "reporting.default", but if I change the data-ui-sref to just "reporting", the activation functionality works with "reporting.style1" when I manually navigate, but the top nav link no longer works.

Edit:
Found that I could use $state.includes('reporting.*') within an ngClass which works nicely.

[pandeysoni]

Hey, I am new to UI-router and I am stuck with same issue, can you please let me know proper solution i added $state.includes in ng-class, but still not working, shall i need to add any other thing.

Thanks in advance