Use nested states as tabs in ui-router

Question

The documentation seems a little sparse on this particular case, however I'm working off of the "Multiple Views About Page" section of this tutorial, which is supported by this SO post.

I'm trying to convert one of my pages to a parent state that renders each tab as child states. The syntax below doesn't throw an error, however only the tab headers are rendering, none of the content. I've set breakpoints in the init functions in the child controllers and nothing fires, and I'm not getting any errors back in the console. I've also created a breakpoint in the $stateChangeError callback and am getting nothing in there as well.

parent state

<div class="container">
    <h2> <i class="fa fa-user"></i> Click to Call Settings for {{user.fullName}}</h2>
    <uib-tabset active="active" id="usersettings">
        <uib-tab index="0" heading="SIP Settings"> 
            <div ui-view="sipSettings"></div> 
        </uib-tab>   
        <uib-tab index="1" heading="Favorites"> 
            <div ui-view="favorites"></div>       
        </uib-tab>
    </uib-tabset>  
</div>>

favoritesPartial.html (edited for the sake of space)

<form name="favoritesForm">
    <div ng-repeat="favorite in pbxFavorites" id="favoritesContainer">

    </div>
</form>
<div class="form-footer">
    <button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
    <button type="submit" class="btn btn-primary" ng-click="saveFavorites()">Save Favorites</button>
</div> 

sipSettingsPartial.html (edited for the sake of space)

<form name="sipSettingsForm">
    <div class="row">

    <div class="form-footer">
        <button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
        <button type="submit" class="btn btn-primary" ng-click="savePbxSettings()">Save Settings</button>
    </div>  
 </form>

state provider

        .state('clickToCall', {
            url: '/clickToCall',
            templateUrl: 'app/components/clickToCall/clickToCall.html',
            controller: 'ClickToCallController',
            controllerAs: 'vm',
            parent: 'app',
            authenticate: true,
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            resolve:{
                security:['$q', '$rootScope', 'parentResolves',  'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
                    if($rootScope.isLoggedIn()){
                        return $q.resolve();
                    } else {
                        return $q.reject(routeErrors.NO_ACCESS);
                    }
                }]
            },
            params:{
                'user':''
            },
            view:{
                'sipSettings@clickToCall': {
                    templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
                    controller: 'SipSettingsController'
                },
                'favorites@clickToCall':{
                    templateUrl: 'app/components/clickToCall/favoritesPartial.html',
                    controller: 'FavoritesController'
                }
            }
        })

folder structure

screen shot

Answer 1

Stupid typo...... named the section view instead of views , also left the templateUrl in the parent state. The following config works:

        .state('clickToCall', {
            url: '/clickToCall',
            controller: 'ClickToCallController',
            controllerAs: 'vm',
            parent: 'app',
            authenticate: true,
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            resolve:{
                security:['$q', '$rootScope', 'parentResolves',  'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
                    if($rootScope.isFirmAdmin2 || $rootScope.isCloud9){
                        return $q.resolve();
                    } else {
                        return $q.reject(routeErrors.NO_ACCESS);
                    }
                }]
            },
            params:{
                'user':''
            },
            views:{
                '':{
                    templateUrl: 'app/components/clickToCall/clickToCall.html'
                },
                'sipSettings@clickToCall': {
                    templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
                    controller: 'SipSettingsController'
                },
                'favorites@clickToCall':{
                    templateUrl: 'app/components/clickToCall/favoritesPartial.html',
                    controller: 'FavoritesController'
                }
            }
        })