Re-use the same HTML template for multiple pages with different content

ionic-v1
1

I am building an app with multiple pages to which the user can navigate via list items. A lot of these pages have the same HTML structure, only the content differs. How can I just use one HTML file and fill the content dynamically? Is this done via a controller per page? Or is there a better way to do this?

I also saw that slide-box could be helpful, but I guess you can only use that when swiping the whole page which is not exactly what I need.

Here is an example of the HTML code for one page:

<ion-view title="Comparison">
    <div class="bar bar-subheader bar-stable">
    <h5 class="text-center">Do you have many categories?</h5>
</div>
<ion-content class="has-subheader">
    <ion-list>
        <ion-item ui-sref="bar-chart" class="text-center">Yes</ion-item>
        <ion-item ui-sref="column-chart" class="text-center">No</ion-item>
    </ion-list>
</ion-content>`

So the parts that need to be dynamic per page are the title, h5 and list items.

Now I have a separate HTML file per page. I then refer to these HTML files in the .state in app.js as shown below.

.state('comparison-nb-categories', {
  url: '/',
  templateUrl: 'templates/comparison/nb-categories.html'
})

That page can be accessed from another page via an ui-sref as shown below.

<ion-item ui-sref="comparison-nb-categories" class="text-center">No</ion-item>