состояние по умолчанию во вложенном ui-view в ui-router

Я работаю над проектом, где у меня есть директива для многоступенчатой формы. По сути, пытаюсь воспроизвести это. В макете проекта есть заголовок, навигация, страница содержимого (включая ui-view) в зависимости от вкладки, выбранной на вкладке навигации.

Теперь есть вкладка формы, которая при нажатии маршрутов на HTML-страницу, которая включает эту директиву формы. Директива вызывает шаблон (который включает другой ui-view) загружает содержимое html, но не загружает вложенное состояние. Как установить состояние по умолчанию?

Каталог проекта выглядит так:

src
   main
       app
          directive
                  formData
                          formData.js
                          formData.tpl.html
                          formInterest.tpl.html
                          formProfile.tpl.html
                          formFinal.tpl.html
          views
               header.html
               leftNavigation.html
               appRun.html
          app.js
          index.html

Файл app.js имеет состояния, определенные как

$stateProvider
        .state('landingPage', {
            url: '/landingPage',
            templateUrl: 'views/landingPage.html'
        })
        .state('appRun', {
            url: '/appRun',
            templateUrl: 'views/appRun.html'
        })
        .state('appRun.first', {
            url: '/first',
            templateUrl: 'directives/formData/formProfile.tpl.html'
        })
        .state('appRun.second', {
            url: '/second',
            templateUrl: 'directives/formData/formInterest.tpl.html'
        })
        .state('appRun.third', {
            url: '/third',
            templateUrl: 'directives/formData/formFinal.tpl.html'
        });

AppRun.html выглядит

<form-data></form-data>

Директива formData.js выглядит так:

var formData = angular.module('formData',[]);

formData.directive('formData',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function($scope, element, attributes){

        },
        controller: function($scope,$attrs,$http){

            $scope.processForm = function(){
                console.log("processFrom");
            }
        },
        templateUrl: 'directives/formData/formData.tpl.html'
    }
});

formData.tpl.html выглядит

<div class="row">
    <div class="col-sm-8 col-sm-offset-2">

        <div id="form-container">

            <div class="page-header text-center">
                <h2>Let Be Friends</h2>

                <!-- the links to our nested states using relative paths -->
                <!-- add the active class if the state matches our ui-sref -->
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active"  ui-sref=".first"><span>1</span> Profile</a>
                    <a ui-sref-active="active"  ui-sref=".second"><span>2</span> Interests</a>
                    <a ui-sref-active="active"  ui-sref=".third"><span>3</span> final</a>
                </div>
            </div>

            <!-- use ng-submit to catch the form submission and use our Angular function -->
            <form id="signup-form" ng-submit="processForm()">

                <!-- our nested state views will be injected here -->
                <div  ui-view></div>


            </form>

        </div>

        <!-- show our formData as it is being typed -->
        <pre>
            {{ formData }}
        </pre>


    </div>
</div>

Когда я нажимаю на appRun, он показывает содержимое в formData.html, но ui-view не показывает состояние по умолчанию. Как добавить состояние по умолчанию, так что при загрузке formData.html также отображается состояние appRun.first?