Приложение Angular Js с двумя разными макетами

Я работаю над большим приложением angularJs, которое имеет несколько модулей. Проблема в том, что теперь мне нужно включить статический веб-сайт в это приложение, и этот веб-сайт имеет совершенно другой макет, чем мое приложение.

Я провел некоторые исследования и разработки и нашел несколько ответов, которые в основном зависели от angular.bootstrap.

https://docs.angularjs.org/api/ng/function/angular.bootstrap

но ng-view моего приложения объявлен в теге html, а не в теле, и далее мой макет выглядит так, как указано ниже.

<div ui-view="header">
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <!-- BEGIN SIDEBAR -->
    <div class="page-sidebar-wrapper" ui-view="sidebar">
    </div>
    <!-- END SIDEBAR -->
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <div class="page-content" ui-view="content">
        </div>
    </div>
    <!-- END CONTENT -->
</div>

но структура веб-сайта полностью отличается от этой структуры, поэтому кто-нибудь может предложить, как решить эту ситуацию

должен ли я использовать два ng-представления в моем index.html, если да, то как я могу использовать два ng-представления при объявлении в теге html.

Спасибо