title: Default nested ui-views in ui-router
body: <p>I'm having trouble with a simple ui-router sample I have set up.  I have a company page, whose default sub-state should show CompanyProfile, but it defaults to nothing until I click profile.  Once I clicked employees, I have to click profile twice to get it to show again.  Ideally I want <code>ui-sref="company()"</code> and <code>ui-sref="company.profile()"</code> to display the same screens.  It seems like I'm missing something small..</p>
  
  <p>Here's the plnkr:</p>
  
  <p><a href="http://plnkr.co/edit/A3LHGqQIuRlK1QdjuzrP?p=preview" rel="nofollow">http://plnkr.co/edit/A3LHGqQIuRlK1QdjuzrP?p=preview</a></p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;a ui-sref="company()"&gt;company&lt;/a&gt;
    | &lt;a ui-sref="company.profile()"&gt;profile&lt;/a&gt;
    | &lt;a ui-sref="company.employees()"&gt;employees&lt;/a&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$stateProvider
      .state('company', {
          url: '/',
          templateUrl: 'company.html',
          controller: 'CompanyCtrl as CompanyCtrl'
      })
      .state('company.profile', {
          url: '',
          templateUrl: 'profile.html',
          controller: 'CompanyProfileCtrl as CompanyProfileCtrl'
      })
      .state('company.employees', {
          url: '/employees',
          templateUrl: 'employees.html',
          controller: 'CompanyEmployeesCtrl as CompanyEmployeesCtrl'
      });
  </code></pre>
  
  <p>btw, I'm writing everything as components and decided to define the routes in each component, so you'll find the 3 state definitions in the 3 controllers.  I'm not entirely sure this is the best approach or not yet.</p>