Nested ui-view in angularjs

Hello i am trying to do something here but it does not work, i have the following view:

<header ui-view="header">

</header>

and i my app.js file:

.state('root', {
    url: '',
    views: {
        'header': {
            templateUrl: '/js/app/partials/layout/header.html',
            controller: 'HeaderController'
        },
        'slider': {
            templateUrl: '/js/app/partials/slider.html'
        },
        'container@': {
            templateUrl: '/js/app/partials/home.html',
            controller: 'HomeController'
        },
        'sidebar': {
            templateUrl: '/js/app/partials/layout/sidebar.html',
            controller: 'SideBarController'
        },
        'footer':{
            templateUrl: '/js/app/partials/layout/footer.html'
        }
    }
})

Now this particular view:

'slider': {
    templateUrl: '/js/app/partials/slider.html'
},

is not in my index.html file but rather within my /partial/layout/header.html file. Now the header template is being loaded into the header view, but the slider view does not show.

This is my header.html partial with my slider view inside:

<div class="container-fluid">
    <div class="col-md-12">
        <a href="#" class="pull-left">
            <img src="images/logo.png" alt="Your Happy Family" class="img-responsive">
        </a>
        <!-- Begin Top Navigation -->
        <div class="menu_block">
            <nav class="horizontal-nav full-width horizontalNav-notprocessed">
                <ul class="sf-menu">
                    <li class="home"><a ui-sref="root.home">home</a></li>
                    <li class="tickets">
                        <a href="#">tickets</a>

                        <ul>
                            <li class="bus"><a href="#">Bus</a></li>
                            <li class="airline"><a href="#">Local Airline</a></li>
                            <li class="events"><a href="#">Events</a></li>
                        </ul>
                        <div class="clear"></div>
                    </li>
                    <li class="partners"><a ui-sref="root.partners">partners</a></li>
                    <li class="contact"><a ui-sref="root.contact">contact us</a></li>
                </ul>
            </nav>
            <div class="clear"></div>
        </div>
        <!-- End Top Navigation -->
        <div class="clear"></div>

        <!-- Slider View -->
        <div ui-view="slider">
        </div>

        <div class="clear"></div>
    </div>
</div>

I am doing this for a reason, i need my slider view to appear within the header section, i would like some help with this, please let me know if you need further clarification of what i want to do.