Multiple Angular-ui-router-tabs

I'm having issues with multiple views that each contains the bootstrap tabs. On my work I have two ui-views that both contain BS tabs. My first question is, let's say we'll load t

Solution 1:

I have found this link and described very nicely about how to load nested views and multiple views within page:

https://scotch.io/tutorials/angular-routing-using-ui-router

.state('home', {
    url: '/home',
    views: {

        // the main template will be placed here (relatively named)'': { templateUrl: 'home.tpl.html' },

        // the child views will be defined here (absolutely named)'columnOne@home': { 
           template: 'child1.tpl.html',
           controller: ''
         },

        // for column two, we'll define a separate controller 'columnTwo@home': { 
            templateUrl: 'child2.tpl.html',
            controller: ''
        }
    }

});

Index.html

<divui-view></div><!-- parent view renders home.tpl.html-->

In home.tpl.html declare the chiled views you wanted display

<!-- chiled views --><divclass="col-sm-6"><divui-view="columnOne"></div></div><divclass="col-sm-6"><divui-view="columnTwo"></div></div>