Angular router nav highlighting for parent page

Question

I have 2 states with ui-router declared like so:

.state('news', {
  url: '/news',
  views: {
    '': {
      templateUrl: '/partials/common/news/list.html',
      controller: 'NewsIndexController as news'
    }
  }
})

.state('newsShow', {
  url: '/news/:slug',
  views: {
    '': {
      templateUrl: '/partials/common/news/show.html',
      controller: 'NewsShowController as newsShow'
    }
  }
})

My nav bar only has a single news link in:

<nav>
  <ul>
    <li>
      <a href="/news" ui-sref-active="active">News</a>
    </li>
  </ul>
</nav>

When I'm on an individual news page, how can I get the news link in the nav to have the active state?

Answer 1

You can use ng-class :

ng-class="{selected: $state.includes(state)}"

More on $state.includes here: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Hope this will help.