angularjs - Active link/tab in AngularUI Router

Question

I'm using AngularUI Router and I'm trying to have nested/children links.

All works fine but how do I have selected/active link in Contact tab?

Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl unless I click on the link contact one.

angular
    .module ('myApp', ['ui.router'
  ])
    .config (['$urlRouterProvider', '$stateProvider',  function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise ('/summary');

        $stateProvider.
            state ('summary', {
            url: '/summary',
            templateUrl: 'summary.html',
            controller: 'summaryCtrl'
          }).
            state ('about', {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
          }).
            state ('contact', {
            url: '/contact',
            templateUrl: 'contact.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.one',{
            url: '/contact.contactone',
            templateUrl: 'one.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.two',{
            url: '/contact.contacttwo',
            templateUrl: 'two.html',
            controller: 'contacttwoCtrl'
          });

      }]);

Plunker: http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

Answer 1

There's a much quicker way to do this. Just use the ui-sref-active="active" attribute instead of ui-sref.

An example:

<ul>
    <li ui-sref-active="active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

When the state is active the list item gets the class active. If you want a different class for active states or more than one class, just add it as follows

<ul>
    <li ui-sref-active="active so-active super-active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>