title: How to resize Ionic main contents when toggling a subheader using ngIf
body: <p>I am trying to toggle an Ionic sub header on/off using an <code>ngIf</code> as in the following</p>
  
  <pre><code>&lt;div class="bar bar-subheader" ng-if=showSubheader&gt;
      &lt;h2 class="title"&gt;Sub Header&lt;/h2&gt;        
   &lt;/div&gt;
  
   &lt;ion-content class="has-subheader"&gt;
      &lt;div data-ng-include="'app/main/main.html'"&gt;&lt;/div&gt;
   &lt;/ion-content&gt;
  </code></pre>
  
  <p>And setting the $scope.showSubheader to true / false. The sub menu shows/hide fine, but the main content does not resize when the sub header is toggled. </p>
  
  <p>I have tried adding an adding/removing the class <code>has-subheader</code> in the code behind, and calling <code>$scope.apply()</code>, but nothing seems to "refresh" the main contents height. If I have the <code>class="has-subheader"</code> there initially, then there is always a space for the subheader, visible or not, if I don't have it there, then the subheader covers the top of the main contents.</p>
  
  <p>I had trouble getting a plunk to show the Ionic headers, so haven't made one at this stage (hoping this description will be enough)</p>
  
  <p>Also, I am using this inside of an Ionic <a href="http://blog.ionic.io/splitview-has-landed" rel="nofollow">splitview</a>...</p>
  
  <pre><code>&lt;ion-side-menus&gt;
  &lt;ion-side-menu-content&gt;
      &lt;ion-header-bar class="bar-positive"&gt;
          &lt;button class="button button-icon ion-navicon" ng-click="vm.toggleLeft()" ng-hide="$exposeAside.active"&gt;&lt;/button&gt;
          &lt;h1 style="text-align: left" class="title"&gt;Title&lt;/h1&gt;            
      &lt;/ion-header-bar&gt;
  
      &lt;div class="bar bar-subheader" ng-if=showSubheader&gt;
       &lt;h2 class="title"&gt;Sub Header&lt;/h2&gt;        
     &lt;/div&gt;
  
      &lt;ion-content id="maincontent" class="padding has-subheader"&gt;
          &lt;div data-ng-include="'app/main/main.html'"&gt;&lt;/div&gt;
      &lt;/ion-content&gt;
  
    &lt;ion-footer-bar align-title="left" class="bar-balanced"&gt;&lt;/ion-footer-bar&gt;
  &lt;/ion-side-menu-content&gt;
  
  &lt;ion-side-menu width={{vm.menuwidth}} expose-aside-when={{vm.exposewhen}}&gt;
      &lt;ion-header-bar class="bar-royal"&gt;
          &lt;h1 style="text-align: left" class="title"&gt;Options&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content&gt;
          &lt;div data-ng-include="'app/options/options.html'"&gt;&lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-side-menu&gt;
  </code></pre>
  
  <p>Does anyone know a way around this?</p>
  
  <p>Thanks in advance for any suggestions!</p>