title: Is there a way to hide the header and footer of an ion-view dynamically?
body: <p>I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.</p>
  
  <p>I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.</p>
  
  <p>So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?</p>
  
  <p><strong>EDIT</strong>
  So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.</p>
  
  <p>Here is a copy of my view:</p>
  
  <pre><code>&lt;ion-view title="My Title"&gt;
      &lt;ion-nav-buttons side="right"&gt;
          &lt;button menu-toggle="right" class="button button-icon icon ion-navicon"&gt;&lt;/button&gt;
      &lt;/ion-nav-buttons&gt;
      &lt;ion-content class="has-header has-footer" id="testCanvas" overflow-scroll="true" on-scroll="scroll()"&gt;
      &lt;/ion-content&gt;
      &lt;ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;"&gt;
          &lt;div class="button-bar"&gt;
              &lt;button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')"&gt;Save&lt;/button&gt;
              &lt;button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')"&gt;Load&lt;/button&gt;
              &lt;button class="button icon-left ion-ios7-play-outline" ng-click="play()"&gt;Play&lt;/button&gt;
          &lt;/div&gt;
      &lt;/ion-footer-bar&gt;
  &lt;/ion-view&gt;
  </code></pre>