PhoneGap динамически создает страницы в мобильном приложении

У меня есть мобильное приложение PhoneGap, которое имеет пару предопределенных "html-страниц" (я использовал двойные кавычки, потому что они не являются фактическими html файлами). Я использовал для него структуру onsen-ui, поэтому я могу поместить все "html" страницы в файл ONE index.html.

Я создаю страницы следующим образом:

<ons-template id="login.html">  
    <ons-page ng-controller="LoginController" id="login">
        <ons-toolbar>
            <div class="center">Log In</div>
        </ons-toolbar>
        <div class="login-form">
            <input type="text" class="text-input--underbar" placeholder="Username" ng-model="email">
            <input type="password" class="text-input--underbar" placeholder="Password" ng-model="password">
            <br><br>
            <ons-button modifier="large" class="login-button" ng-click="checkLogin(email,password)" > Log In</ons-button>
        </div>
    </ons-page>
</ons-template>

Как вы можете видеть, у меня есть контроллер, подключенный к этой странице, называемый LoginController, который определен в файле javascript main.js, который является движком всего приложения. Чтобы сделать/показать что-либо в представлении, он должен иметь определенный контроллер и функции.

Возможно ли, динамически добавить эти элементы ons-template> ons-page> в файл index.html, с php, чтобы мы могли "обновить" приложение, не изменяя ничего в приложении? Кроме того, это, вероятно, будет работать только в том случае, если файл main.js также обновлен новым контроллером или должен быть общим?

Приложение используется для отображения информации из базы данных, и мы хотели бы добавить новые "представления" динамически, которые будут отображать разные данные из базы данных.