How use two ui-view independents

Question

I have an application where I wish that two panels (ui-view) work singly.

https://jsbin.com/neroze/edit?js,output

But, when I click in link to change the right panel, the center panel is changed and when I click to change the center panel, the right panel is changed.

I wonder how I can work around this problem.

Answer 1

You should have a main state (a parent state) which defines your views (with controllers and templates, etc...) Then you can have child states where you can override your views using absolute state definitions.

$stateProvider.state('app', {
    url: '/',
    abstract: true,
    parent: 'app',
    views: {
        'panelLeft@app': {
             templateUrl: 'modules/panel/views/leftPanel.html',
             controller: 'LeftPanelCtrl as vm'
        },
        'panelRight@app': {
            templateUrl: 'modules/module1/views/anotherView.html',
            controller: 'Module1Ctrl as vm'
        }
    }
}).state('anotherstate', {
    url: '/',
    parent: 'app',
    views: {
        'panelRight@anotherstate': {
            templateUrl: 'modules/module2/views/differentView.html',
            controller: 'Module2Ctrl as vm'
        }
    }
});

Note: it's just an example from scractch, may not work for the first run.