Ui-router嵌套视图不能正确加载

嘿，我已经创建了一个简单的应用程序。

应用程序有以下视图

1。设置 -主视图。

2。配置文件 -子视图，设置视图的子视图。

3。帐户 -子视图，设置视图的子视图。

我希望应用程序从配置文件页开始，因此我编写了以下代码:

$urlRouterProvider.otherwise('/profile');

但显然没有发生，我得到了一个空白屏幕，不能正确地看到视图(settings.profile)。

我已经将我的代码添加到一个柱塞，使事情更方便和可访问的其他开发人员，可以帮助我解决我的问题。https://plnkr.co/edit/RFP5dUNV876cy8vRDuvL?p=preview

Main Main代码如下:

/**
*  Module
*
* Description
*/
var app = angular.module('app', ['ui.router'])
app.controller('mainCtrl', ['$scope', function($scope){
    $scope.title="Index Page";
}]);
app.controller('ProfileController', ['$scope', function($scope){
    $scope.title="Profile Page";
}]);
app.controller('AccountController', ['$scope', function($scope){
    $scope.title="Account Page";
}]);
app.controller('SettingsController', ['$scope', function($scope){
    $scope.title="Settings Page";
}]);
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('settings', {
            url: '/settings',
            templateUrl: 'settings.html',
            controller: 'SettingsController'
        })
        .state('settings.profile', {
            url: '/profile',
            templateUrl: 'profile.html',
            controller: 'ProfileController'
        })
        .state('settings.account', {
            url: '/account',
            templateUrl: 'account.html',
            controller: 'AccountController'
        });
    $urlRouterProvider.otherwise('/profile');
});