ui-router abstract route, ui-view and ui-sref-active in action

[genkio]

Partial code example:

router

$stateProvider.state('app.mysettings', {
    templateUrl: 'assets/views/setting.html',
    abstract: true
  }).state('app.mysettings.password', {
    url: '/me/settings-password',
    templateUrl: 'assets/views/setting_password.html',
    controller: 'PasswordController'    
  }).state('app.mysettings.address', {
    url: '/me/settings-address',
    templateUrl: 'assets/views/setting_address.html',
    controller: 'PasswordController'    
  })

setting.html

<div ng-include=" 'assets/views/blocks/header.html' "></div>
<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="sidebar">
        <div class="sidebar-title">Settings</div>
        <div class="sidebar-body">
          <div class="sidebar-menu" ui-sref-active="state-active">
            <a ui-sref="app.mysettings.password">
              Password Setting
              <i class="i-toggle"></i>
            </a>
          </div>
          <div class="sidebar-menu" ui-sref-active="state-active">
            <a ui-sref="app.mysettings.address">
              Address Setting
              <i class="i-toggle"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-10" ui-view></div>
  </div>
</div>

subviews

<div>whatever</div>