title: How to activate a state on page load for angular ui-sref?
body: <p>I'm using the following ui-router configuration. So, when the user clicks on a tab, the tab is highlighted correctly as expected. However, no tab is highlighted when the page first loads and the user has to click on a tab for its state to get activated. I would like the home state to be the active tab when the page first loads. How can I achieve this?</p>
  
  <pre><code> angular.module("app", ['app.home', 'app.page1', 'app.page2', 'app.page3'])
  
  .config(function($stateProvider, $urlRouterProvider) {
  
  $urlRouterProvider.otherwise('home');
  
  $stateProvider
  
  .state('home', {
      url: '/',
      views: {
          'MainContentPlaceHolder': {
              templateUrl: '../Home/_Layout.html'
          }
      }
  })
  
  .state('page1', {
      url: '/page1',
      views: {
          'MainContentPlaceHolder': {
              templateUrl: '../Page-1/_Layout.html'
          }
      }
  })
  
  .state('page2', {
      url: '/page2',
      views: {
          'MainContentPlaceHolder': {
              templateUrl: '../Page-2/_Layout.html'
          }
      }
  })
  
  .state('page3', {
      url: '/page3',
      views: {
          'MainContentPlaceHolder': {
              templateUrl: '../Page-3/_Layout.html'
          }
      }
  });
  })
  </code></pre>
  
  <p>My HTML markup is:</p>
  
  <pre><code>&lt;body&gt;
  &lt;section id="NavBar"&gt;
      &lt;nav class="navbar navbar-inverse navbar-static-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" ui-sref="home"&gt;&lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="page2"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="page3"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/section&gt;
      &lt;section id="ContentPlaceHolder" ui-view="MainContentPlaceHolder"&gt;&lt;/section&gt;
  &lt;/body&gt;
  </code></pre>