title: Angular-ui-router: ui-sref-active and nested states
body: <p>I am using <a href="http://angular-ui.github.io/ui-router/" rel="noreferrer"><code>angular-ui-router</code></a> and nested states in my application, and I also have a navigation bar. The nav bar is hand written, and uses <code>ui-sref-active</code> to highlight the current state. It is a two-level navigation bar.</p>
  
  <p>Now, when I am in, say <code>Products / Categories</code> I would like both <code>Products</code> (in level 1) and <code>Categories</code> (in level 2) to be highlighted. However, using <code>ui-sref-active</code>, if I am in state <code>Products.Categories</code> then only that state is highlighted, not <code>Products</code>.</p>
  
  <p>Is there some way to make <code>Products</code> highlight in that state?</p>