Sidebar with tabs and external tab content templates?

ionic-v1
1

I am trying to setup my app to have a sidebar with tabs on one screen. I followed this codepen and managed to get it working.

However now I would like to use external template files for the tab content. I am using the below example. Unfortunately the app switches to the full page view of the template content each time I click on it. The tabs that do not use an external file work great.

Can someone give me a few tips on how to get this working?

Tabs.html

<ion-header-bar class="bar bar-header bar-dark">
  <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  <h1 class="title">Swoop</h1>
  <button class="button button-icon">
    <i class="icon ion-android-data"></i>
  </button>
</ion-header-bar>
<ion-view>
    <ion-tabs tabs-type="tabs-icon-only">

        <ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
          <ion-content has-header="true" padding="true">
              <h2>Tab 1 Content</h2>
          </ion-content>
        </ion-tab>

        <ion-tab
          title="Tab 2"
          icon-on="ion-ios7-filing"
          icon-off="ion-ios7-filing-outline"
          href="app/content2">
          <ion-nav-view name="dashboard"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
            <ion-content has-header="true" padding="true">
                <h2>Tab 3 Content</h2>
            </ion-content>
        </ion-tab>

    </ion-tabs>
</ion-view>

Content2.html

  <ion-content class="has-header"  padding="true">
    <h1>Content 2</h1>
  </ion-content>

app.js snippet

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    // define abstract routes
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    .state('app.tabs', {
      url: "/tabs",
      views: {
        'menuContent' :{
          templateUrl: "templates/tabs.html"
        }
      }
    })

    .state('app.content2', {
      url: "/content2",
      templateUrl: "templates/content2.html"
    });

    $urlRouterProvider.otherwise('/app/tabs');
    
})