title: Nesting ion-nav-view within content
body: <p>I have a basic, working example of what I want to do, but taking this approach comes with a strange limitation. In <code>templates/group.html</code>, there doesn't appear to be any way to add content above or below the <code>ion-nav-view</code>.</p>
  
  <p><a href="http://codepen.io/anon/pen/gaQaGZ" rel="nofollow"><strong>Click here for live demo.</strong></a></p>
  
  <pre><code>  $stateProvider.state({
      name: 'home',
      url: '/',
      templateUrl: 'templates/home.html'
    });
    $stateProvider.state({
      name: 'group',
      url: '/group',
      templateUrl: 'templates/group.html',
      abstract: true
    });
    $stateProvider.state({
      name: 'group.home',
      url: '/',
      templateUrl: 'templates/group-home.html'
    });
    $stateProvider.state({
      name: 'group.post',
      url: '/post/:id',
      templateUrl: 'templates/group-post.html'
    });
  </code></pre>
  
  <pre><code>    &lt;ion-nav-bar class="bar-positive"&gt;
        &lt;ion-nav-back-button&gt;
        &lt;/ion-nav-back-button&gt;
      &lt;/ion-nav-bar&gt;
  
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  
      &lt;script id="templates/home.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Home"&gt;
          &lt;ion-content&gt;
            &lt;p&gt;This is home.&lt;/p&gt;
            &lt;a ui-sref="group.home"&gt;Go to a group.&lt;/a&gt;
          &lt;/ion-content&gt;
        &lt;/ion-view&gt;
      &lt;/script&gt;
  
      &lt;script id="templates/group.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Group"&gt;
          &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
        &lt;/ion-view&gt;
      &lt;/script&gt;
  
      &lt;script id="templates/group-home.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Group Home"&gt;
          &lt;ion-content&gt;
            &lt;p&gt;This is the group home.&lt;/p&gt;
            &lt;a ui-sref="group.post({id: 4})"&gt;Go to group post.&lt;/a&gt;
          &lt;/ion-content&gt;
        &lt;/ion-view&gt;
      &lt;/script&gt;
  
      &lt;script id="templates/group-post.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Group Post"&gt;
          &lt;ion-content&gt;
            &lt;p&gt;This is a group post.&lt;/p&gt;
          &lt;/ion-content&gt;
        &lt;/ion-view&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>How can I get this behavior, but also add some content within <code>group.html</code>?</p>
  
  <p>For example:</p>
  
  <pre><code>    &lt;script id="templates/group.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Group"&gt;
          &lt;p&gt;Some stuff here.&lt;/p&gt;
          &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt; &lt;!-- group child view stuff here --&gt;
          &lt;p&gt;Stuff here, too, if possible.&lt;/p&gt;
        &lt;/ion-view&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>I can see why the nested <code>ion-nav-view</code> doesn't work out because it has a full screen kind of container going on, but changing it out for a ui-view breaks the parent ion-nav-view... the transitions and ion-nav-bar stop working. It seems like the parent <code>ion-nav-view</code> shouldn't mind there being a child <code>ui-view</code>. Perhaps this kind of UI just isn't possible with ionic?</p>