ionic angular ui-route why my child views are not showing

I have nested views inside the main.html template that are not showing the h1 message.

this is my routes

.config(function($stateProvider, $urlRouterProvider){

$urlRouterProvider.otherwise('/');

$stateProvider

    .state('login',{
        url: '/',
        templateUrl: 'templates/login.html',
        controller:'loginController'
    })

    .state('main', {
        url: 'main',
        templateUrl: 'templates/main.html'
    })

    .state('main.categories', {
        url: '/categories',
        views: {
            'main-categories': {
                templateUrl: 'templates/main-categories.html',
                controller: 'categoriesController'
            }
        }
    })

    .state('main.products', {
        url: '/products',
        views: {
            'main-products': {
                templateUrl: 'templates/main-products.html',
                controller: 'productsController'
            }
        }
    })

    .state('main.tickets', {
        url: '/tickets',
        views: {
            'main-tickets': {
                templateUrl: 'templates/main-tickets.html',
                controller: 'ticketsController'
            }
        }
    })

})

the state main has child views of main.categories, main.products and main.tickets. This is my main.html template holding the child views

<div class="bar bar-header">
    <button class="button button-icon icon ion-navicon"></button>
    <div class="h1 title">Header Buttons</div>
    <button class="button button-clear button-positive">Edit</button>
</div>

<div class="row">

    <!--categories-->
    <div class="col-20">
        <ion-nav-view name="main-categories"></ion-nav-view>
    </div>

    <!--products-->
    <div class="col-60">
        <ion-nav-view name="main-products"></ion-nav-view>
    </div>

    <!--tickets-->
    <div class="col-20">
        <ion-nav-view name="main-tickets"></ion-nav-view>
    </div>

 </div>

this is what i have in the main-categories child view

 <h1>categories</h1>

this is what i have in the main-products child view

<h1>products</h1>

this is what i have in the main-tickets child view

<h1>tickets</h1>

i want those 3 child views to diplay child when i go to the /main url. what am I doing wrong ?