title: Active link/tab in AngularUI Router
body: <p>I'm using <a href="https://angular-ui.github.io/ui-router/site/#/api/ui.router" rel="nofollow">AngularUI Router</a> and I'm trying to have nested/children links.</p>
  
  <p>All works fine but how do I have selected/active link in Contact tab?</p>
  
  <p>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 <code>controlleroneCtrl</code> unless I click on the link contact one. </p>
  
  <pre><code>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'
            });
  
        }]);
  </code></pre>
  
  <p>Plunker: <a href="http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview" rel="nofollow">http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview</a></p>