OnsenUI - Multiple templates in one file : templates showing at the bottom - angularjs

Question

I'm developing a mobile app with cordova and onsenui.
I have a issue with defining multiple pages in single HTML.
Here's my HTML :
<ons-page ng-controller="accountController">
<ons-tabbar>
<ons-tab page="profile.html" label="Profil" icon="ion-person" active="true"></ons-tab>
<ons-tab page="filters.html" label="Filtres" icon="ion-android-options"></ons-tab>
<ons-tab page="settings.html" label="Paramètres" icon="ion-gear-a"></ons-tab>
</ons-tabbar>
</ons-page>
<ons-template id="profile.html">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Mon profil</div>
<div class="right">
<ons-toolbar-button ng-click="saveAccount()">
<ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<ons-row>
<ons-col size="30%">
<img src="res/dev/person.png" style="max-height: inherit; max-width: inherit;" />
</ons-col>
<ons-col size="70%">
<label>{{ data.shortname }}</label>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="data.firstname" placeholder="Prénom"
class="text-input text-input--transparent"
style="margin-top:8px; width: 100%;"
autocapitalize="on" autocomplete="on"
spellcheck="false" autocorrect="off" cb-before="Prénom" />
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="data.lastname" placeholder="Nom de famille"
class="text-input text-input--transparent"
style="margin-top:8px; width: 100%;"
autocapitalize="on" autocomplete="on"
spellcheck="false" autocorrect="off" cb-before="Nom de famille"/>
</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="filters.html">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Mes filtres</div>
<div class="right">
<ons-toolbar-button ng-click="saveAccount()">
<ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Filtres
</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="settings.html">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Paramètres</div>
<div class="right">
<ons-toolbar-button ng-click="saveAccount()">
<ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Email : {{ data.email }}
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="data.pwd" placeholder="Mot de passe" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
</ons-template>
So the objective here is to have a tab page, with 3 tabs.
It's working, but the templates still displaying at the bottom of the page, not rendered :
I found out that I can use <script type="text/ons-template" id="profile.html"> in place of <ons-template id="profile.html">, but then I get an error saying that it cannot find the template.
I also found out that I can use <script type="text/ng-template" (...)>. That's working.
Also, I could just define each template in a separate file, but then I'd be having a LOT of files (it's not the only file where I get that problem).
So my questions are : am I doing it wrong ? Is there anybody out there who had the same problem, and solved it ?
Thanks for your help ;)