Allow a single HTML page to inherit 2 pages

I have 2 html pages that will behave like abstract pages that other ones will inherit.

menu.html will render the main menu header like below

enter image description here

listaAcoes.html will render 2 tabs like below

enter image description here

But some pages I need to render both together, like the image below

enter image description here

But I have some doubts. I declare the menu.html as abstract to allow inherit and I did the same for listaAcoes.html.

How can I let a new page inherit both pages to reach my goal like in the image above ?

JS

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })

        .state('listaacao', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/listaAcoes.html",
            controller: 'ListaAcaoCtrl'
        })

        .state('app.minhasAcoesOutrasMetas', {
            url: '/minhasAcoesOutrasMetas',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesOutrasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        })

        .state('listaacao.minhasAcoes', {
            url: '/minhasAcoes',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesMinhasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        });
});

The design looks a bit odd to me, but I can't really give pointers given how little code was posted.

As far as your question, perhaps something like this will work:

// define a hybrid view: templates/hybrid.html
<div id="hybridview">
    <div ui-view="menu"></div> <!-- menu goes here -->
    <div ui-view="listaacao"></div> <!-- listaAcoesgoes here -->
    <div ui-view></div> <!-- content of inherited views goes here -->
</div>


.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })
        .state('listaacao', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/listaAcoes.html",
            controller: 'ListaAcaoCtrl'
        })
        .state('hybrid', {
            url: "/app",
            abstract: true,
            views: {
                '': {
                    templateUrl: "templates/hybrid-layout.html",
                    controller: 'HybridCtrl' // You'll need to define this ctrl if you need it --- otherwise remove this line.
                },
                'menu@hybrid': {
                    templateUrl: "templates/menu.html",
                    controller: 'AppCtrl'
                },
                'listaacao@hybrid': {
                    templateUrl: "templates/listaAcoes.html",
                    controller: 'ListaAcaoCtrl'
                }
        })
        .state('app.minhasAcoesOutrasMetas', {
            url: '/minhasAcoesOutrasMetas',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesOutrasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        })
        .state('listaacao.minhasAcoes', {
            url: '/minhasAcoes',
            views: {
                'menuContent': {
                    templateUrl: 'templates/MinhasAcoesMinhasMetas.html',
                    controller: 'ListaAcaoCtrl'
                }
            }
        })


        // sample child state of hybrid abstract state... you will need to define view and ctrl
        .state('hybrid.hybridChild', {
            url: '/hybridChild',
            views: {
                'menuContent': {
                    templateUrl: 'templates/HybridChildView.html',
                    controller: 'HybridChildViewController'
                }
            }
        });
});