title: How to set a default state with Angular ui-router
body: <p>I am using states to change data in a table.
  URLs are of the form <code>/zone/:zoneCode</code>.<br>
  However, when just <code>/zone</code> is accessed I want it to default to a certain <code>zoneCode</code>.</p>
  
  <p>This is my code:</p>
  
  <pre><code>.state('zone',
  {
      url:'/zone',
      controller:'ZoneController',
      templateUrl:'views/zone.html'
  })
  .state('zone.code',
  {
      url:'/:zoneCode',
      templateUrl:function(stateParams)
      {
          return 'views/zone-codes/'+stateParams.zoneCode+'.html';
      }
  }
  </code></pre>
  
  <p>The template loaded for each subview contains a table that displays data.<br>
  When no <code>zoneCode</code> is present in the URL, the table doesn't exist because the <code>ui-view</code> didn't know to load a <code>templateUrl</code>.</p>
  
  <p>How can I set a default for the parent state?</p>
  
  <p>Thanks.</p>