AngularJS ui-router Nested Named Views

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.0.1/angular-ui-router.min.js"></script>
    <div class = "wrapper" ui-view = "mainContent">
    </div>

JavaScript

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
    $stateProvider
        .state("home",
        {
            url: "/home",
            views: {
                'mainContent': {
                    template: "<div class ='row' ui-view ='appContent'></div>"
                }
            }
        })
        .state("request",
        {
            parent: "home",
            abstract: true,
            url: "/request",
        	views: {
            	'appContent': {
                    template: "<div class ='row' ui-view ='requestContent'></div>"
                }
            }
        })
        .state("request.create", {
            url: "/create",
            views: {
                'requestContent': {
                    template: "<p>Create Request</p>"
                }
            }
        });
    
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('request.create');
    }]);