title: Ionic Framework - Angular html include
body: <p>I'm building an app with the Ionic Framework. I'm using a tab navigation.</p>
  
  <pre><code>angular.module('myapp', ['ionic'])
  
  .config(function ($stateProvider, $urlRouterProvider) {
  
  $stateProvider
      .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
      })
      .state('tabs.home', {
          url: "/home",
          views: {
              'home-tab': {
                  templateUrl: "templates/home.html",
                  controller: 'HomeTabCtrl'
              }
          }
      })
      .state('tabs.news', {
          url: "/news",
          views: {
              'news-tab': {
                  templateUrl: "templates/news.html"
              }
          }
      })....
  </code></pre>
  
  <p>First I wrote all code in 1 html file, then for better oversight I wanted to use html include:</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- Layout Setup --&gt;
  &lt;ion-nav-bar class="bar-app"&gt;&lt;/ion-nav-bar&gt;
  &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  
  &lt;script id="templates/tabs.html" type="text/ng-template"&gt;
      &lt;div ng-include="'sub/tabs.html'"&gt;&lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="templates/home.html" type="text/ng-template"&gt;
      &lt;div ng-include="'sub/home.html'"&gt;&lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="templates/news.html" type="text/ng-template"&gt;
      &lt;div ng-include="'sub/news.html'"&gt;&lt;/div&gt;
  &lt;/script&gt;
  ....
  </code></pre>
  
  <p>home.html:</p>
  
  <pre><code>&lt;ion-view view-title="" hide-nav-bar="true"&gt;
      &lt;ion-content class="padding app-home" scroll="false"&gt;
          &lt;div class="app-image"&gt;
              &lt;img class="full-image" src="img/app-logo.svg"&gt;
          &lt;/div&gt;
          &lt;div class="row app-home-buttons"&gt;
              &lt;div class="col"&gt;
                  &lt;a href="#/tab/news"&gt;
                      &lt;button class="button button-balanced button-block icon-top"&gt;&lt;i class='icon ion-ios-paper-outline'&gt;&lt;/i&gt;&lt;span&gt;News&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>news.html:</p>
  
  <pre><code>&lt;ion-view view-title="News" ng-controller="NewsRefreshCtrl"&gt;
      &lt;ion-content class=""&gt;
          &lt;ion-refresher on-refresh="doRefresh()"&gt;
  
          &lt;/ion-refresher&gt;
          &lt;div class="list"&gt;
  
              &lt;a class="item item-thumbnail-left item-text-wrap" href="#"&gt;
                  &lt;img src="img/tile-icon.png"&gt;
                  &lt;h2&gt;Lorem consetetur sadipscing&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v&lt;/p&gt;
              &lt;/a&gt;
              &lt;/a&gt;
  
          &lt;/div&gt;
  
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Now I have the problem that the bar with the site title isn't working anymore. It doesn't show the title and the included html content is laying on top under the bar.
  Maybe thats because due to the include it's in a div tag now?</p>
  
  <p>How can I solve this?</p>