Angular: Empty Fiddle

http://angularjs.org/

by adamdbradley

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://ionicframework.com/nightly/js/ionic.js"></script>
<link rel="stylesheet" href="http://ionicframework.com/nightly/css/ionic.css">
<script src="http://ionicframework.com/nightly/js/angular/angular-animate.js"></script>
<script src="http://ionicframework.com/nightly/js/angular/angular-route.js"></script>
<script src="http://ionicframework.com/nightly/js/angular/angular-touch.js"></script>
<script src="http://ionicframework.com/nightly/js/angular/angular-sanitize.js"></script>
<script src="http://ionicframework.com/nightly/js/ionic-angular.js"></script>
<div ng-controller="BaseCtrl as base">
  <pane nav-router>
    <nav-bar animation="slide-left-right" ng-hide="base.hideHeader"></nav-bar>
    <tabs>
      <tab title="home">
        <content has-header="true">
          <ul>
            <li>step 1: click this button
              <button ng-click="base.hideHeader = true">hide header</button>
            </li>
            <li>step 2: go to the second tab and show the header again.</li>
            <li>step 3: come back here, and the title will disappear after animating</li>
          </ul>
        </content>
      </tab>
      <tab title="disable header">
        <content has-header="true">
          <button ng-click="base.hideHeader = false">show header</button>
        </content>
      </tab>
    </tabs>
  </pane>
</div>

CoffeeScript

@app = angular.module 'myfiddle', ['ionic']

@app.controller 'BaseCtrl', -> 
  @hideHeader = false
  return this

angular.bootstrap document, ['myfiddle']