Display different template on selecting an option in menu

Question

I'm trying to display different templates on selecting the menu options. I'm able to display it, but I want the menu to be displayed along with respective template selected in menu list (i.e., I want both menu and the respective option selected on same page). When I change the menu option, only the option template has to change and load different template keeping still displaying the menu.

Hope you got the idea. Can someone please suggest a way? Thank you.

Below are my codes:

UI Routing

"use strict";

angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("main");
    $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'app/landingPage/main.html'

    })
.state('settings', {
        url: '/settings',
        views: {
            '': {
                controller: 'settingsController', 
               templateUrl:'app/landingPage/features/settings/settingsTemplate.html'
            },
            'settingsControlPanel@settings': {
                controller: 'settingsControlPanelController',
                    templateUrl:'app/landingPage/features/settings/settingsControlPanel/settingsControlPanelTemplate.html'
                },

                    'truckSettings@settings': {
                        controller: 'truckSettingsController',
                        templateUrl: 'app/landingPage/features/settings/settingsControlPanel/truckSettings/truckSettingsTemplate.html'
                    },
                    'trailerSettings@settings': {
                        controller: 'trailerSettingsController',
                        templateUrl: 'app/landingPage/features/settings/settingsControlPanel/trailerSettings/trailerSettingsTemplate.html'
                    }
                }                    
    })

});

---

main HTML

<div class="icon-bar" ui-view="main">
<a ui-sref="settings" class="item">
        <i class="fa fa-cog" style="font-size:48px;"></i>
        <label>Settings</label>

---

Settings HTML

<div ui-view="settingsControlPanel"></div>

---

Menu HTML

<div class="panel settings-panel panel-primary">
    <div class="panel-heading" align="center">Settings</div>
    <ul>
        <li><a ui-sref="truckSettings"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li>
        <li><a ui-sref="trailerSettings"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li>
</ul>

</div>
<div ui-view="truckSettings"></div>
<div ui-view="trailerSettings"></div>

---

Truck Settings HTML

<div class="panel truck-settings-panel panel-primary">
    <div class="panel-heading">Truck Settings</div>

    <table class="table truck-settings-table table-bordered table-condensed table-striped">

        <tr>
            <th>Model: </th>
            <td class="list-truck-settings-data"></td>
        </tr>

        <tr>
            <th>
                Make Month & Year:
            </th>
            <td class="list-truck-settings-data"></td>
        </tr>
 </table>
</div>

---

Trailer Settings HTML

<div class="panel trailer-settings-panel panel-primary">
        <div class="panel-heading">Trailer Settings</div>

        <table class="table trailer-settings-table table-bordered table-condensed table-striped">

            <tr>
                <th>Model: </th>
                <td class="list-trailer-settings-data"></td>
            </tr>

            <tr>
                <th>
                    Make Month & Year:
                </th>
                <td class="list-trailer-settings-data"></td>
            </tr>
     </table>
    </div>

Answer 1

I found this as one option to the above posted question. We can simply use ng-show to trigger the views, while the controllers are still binded to each views in router.

Menu HTML

<div class="panel settings-panel panel-primary">
    <div class="panel-heading" align="center">Settings</div>
    <ul>
        <li><a ng-click="truck=true; trailer=false"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li>
        <li><a ng-click="truck=false; trailer=true"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li>
</ul>

</div>
<div ui-view="truckSettings" ng-show="truck"></div>
<div ui-view="trailerSettings" ng-show="trailer"></div>