title: AngularJS transition to abstract state
body: <p>I'm working on an application built with AngularJS that has two different states:</p>
  
  <ol>
  <li>App intro wizard</li>
  <li>App pages (with a Navigation template and nested views)</li>
  </ol>
  
  <p>I want to default to State 1 the first time someone access the app, once done the wizard, continue on to the App pages, State 2.</p>
  
  <p>My "app" state (State 2) is an abstract state because it has nested views. So I cannot transition to this state.</p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  
    .state('intro', {
      url: '/',
      templateUrl: 'templates/intro.html',
      controller: 'IntroCtrl'
    })
  
    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl'
    })
  
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    });
  
    $urlRouterProvider.otherwise("/");
  
  })
  </code></pre>