Angularjs load List.html or Grid.html based on user selection in NavBar

I am using Angularjs UI Layout to support resizable splitter. I need to implement List/Grid View for main html file. Such that based on the user selection of button List or Grid in Nav Bar, i have to layout the html file accordingly.

Is there a way to render different html files like List.html for list button selection and Grid.html for grid button selection??

In this case the model binding and UI displayed are same for List.html and Grid.html only the layouts change.

Attaching link to plunker : http://plnkr.co/edit/XYeRbERAWcgkmB5ecNob?p=preview

Any pointer??

List.html

<div id="products" class="row list-group">
    <div class="row">
          <div class="item col-sm-5 col-md-6">
        <div class="editor-container">
            <textarea ui-codemirror="{ onLoad : editorLoaded }" ng-model="sfsql"
                ng-trim="false"></textarea>

        </div>
    </div> 
        <div class="item col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
        <div ng-controller="TableCtrl">
            <div id="tableId" ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-selection ui-grid-infinite-scroll
                 class="grid">
            </div>
        </div>
        </div>
      </div>
      <div class="row">
        <div class="item col-sm-6 col-md-5 col-lg-6">
        <div class="viewer-container">
            <div class="error" ng-bind="results.error"></div>
            <textarea ui-codemirror="viewerOptions"
                ng-model="results.translation"></textarea>
        </div>
        </div>
        <div class="item col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
        <div class="viewer-container">
            <div class="error" ng-bind="results.error"></div>
            <textarea ui-codemirror="planViewerOptions" ng-model="results.plan"></textarea>
        </div>
    </div>
    </div>
</div>

Grid.html

<div class="wrap">
    <div ng-controller="uiLayoutCtrl" ui-layout on-resize="ResizeFn()">
        <div ui-layout="{flow : 'column'}" on-resize="ResizeFn()">
            <div class="editor-container">

                <div><textarea ui-codemirror="{ onLoad : editorLoaded }" ng-model="text"
                    ng-trim="false"></textarea></div>
            </div>
            <div class="viewer-container">
                <div ng-controller="TableCtrl">
                    <div id="tableId" ui-grid="gridOptions" ui-grid-edit
                        ui-grid-cellNav ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-infinite-scroll="10"
                        class="grid">
                    <div class="error" ng-bind="results.error"></div>   
                    </div>
            </div>
        </div>
</div>
<div ui-layout="{flow : 'column'}" on-resize="ResizeFn()">
                <div class="viewer-container">
                    <div class="error" ng-bind="results.error"></div>
                    <textarea ui-codemirror="viewerOptions"
                        ng-model="results.translation"></textarea>
                </div>
                <div class="viewer-container">
                    <div class="error" ng-bind="results.planError"></div>
                    <textarea ui-codemirror="planViewerOptions" ng-model="results.plan"></textarea>
                </div>
        </div>
    </div>
</div>