How to make parent li active when the child changes

I'm new to both ui router and angularjs. The problem I'm facing is -

In my header

<li   ng-class="{active: $state.includes('settings')}" id="header01">                

 <a  ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>    

In my main.js i have -


abstract: true,
      url: '/Settings',

      templateUrl: 'Settings/settings.html',

 resolve: {


      controller: ['$scope', '$state', 'contacts', 'utils',



controller: "settingPersonal",
templateUrl: "Settings/personal.html"


controller: "settingPersonal",
templateUrl: "Settings/Additional.html"


controller: "myCtrl2 as second",
templateUrl: "Settings/password_reset.html"

Now when i change from personal to any other tab, the settings in header becomes inactive. How to solve this.

Thank you.


One approach would be to use, eg:

.state('settings', {
  url: '/settings',
  templateUrl: 'settings/settings.html',
  data: {
    pageTitle: 'Settings'

Then in your view you can access $

<li ng-class="{active: $'Settings')}">
  <a ui-sref="settings">Settings</a>

<li ng-class="{active: $'About')}">
  <a ui-sref="settings">About</a>

But personally, i'd probably put the nav items in an ng-repeat, and create the page title/class dynamically with, to avoid hard coding page titles.

Need Your Help

How to include large set of data with my iOS app at install?

ios plist

I have a big database of data I want my app to install with, too big for NSDefaults, essentially it's too big for me to type in (it's computer generated).