Load content in main page after selecting in sidebar

ionic-v1
1

I’m currently creating a hybrid app that features a sidebar + a main page.
After the user has clicked an option in the sidebar, I would like to change the content of the main page (with it’s own code).

It’s easily possible to copy the code of the sidebar to another .html file, but that’s very redundant and I’m pretty sure another way exists.

So my question is: how do I handle this situation?
I’m also including some code that should help explain.

<ion-side-menus>

<!-- Main page-->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">

    <!-- Knop toggleSidebar -->
    <button class="button button-icon" ng-click="triggerSidebar()">
        <i class="icon ion-navicon"></i>
    </button>

    <h1 class="title">Proof of concept</h1>
</ion-header-bar>
<ion-content>
    <div class="row">
        <div class="col" col-50>5 + 8 = </div>
        <div class="col" col-25><input type="number" placeholder="13"></div>
        <div class="col" col-25><button class="button button-small">Check</button></div>
    </div>
</ion-content>
</ion-side-menu-content>

<!-- End Main page -->

<!-- Sidebar -->

<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
    <h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
        <div class="item item-divider">Settings</div>
        <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
        <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
        <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
    </div>
</ion-content>
</ion-side-menu>

<!-- End sidebar -->