diff --git a/js/angular/directive/headerFooterBar.js b/js/angular/directive/headerFooterBar.js
index 1447268436..fd63943cf6 100644
--- a/js/angular/directive/headerFooterBar.js
+++ b/js/angular/directive/headerFooterBar.js
@@ -15,6 +15,9 @@ IonicModule
  * Can also be a subheader (lower down) if the 'bar-subheader' class is applied.
  * See [the header CSS docs](/docs/components/#subheader).
  *
+ * Note: If you use ionHeaderBar in combination with ng-if, the surrounding content
+ * will not align correctly.  This will be fixed soon.
+ *
  * @param {string=} align-title Where to align the title.
  * Avaialble: 'left', 'right', or 'center'.  Defaults to 'center'.
  *
@@ -34,6 +37,45 @@ IonicModule
  * </ion-content>
  * ```
  */
+/**
+ * @ngdoc demo
+ * @name ionHeaderBar#simple
+ * @module headerBarSimple
+ * @javascript
+ * angular.module('headerBarSimple', ['ionic'])
+ * .controller('HeaderBarSimpleCtrl', function($scope) {
+ *   $scope.data = {
+ *     isSubheader: false,
+ *     isShown: true
+ *   };
+ *   $scope.items = [];
+ *   for (var i = 0; i < 20; i++) {
+ *     $scope.items.push('Item ' + i);
+ *   }
+ * });
+ *
+ * @html
+ * <div ng-controller="HeaderBarSimpleCtrl">
+ *   <ion-header-bar class="bar-positive"
+ *     ng-class="{'bar-subheader': data.isSubheader}"
+ *     ng-show="data.isShown">
+ *     <h1 class="title">Tap Me to Scroll Top</h1>
+ *   </ion-header-bar>
+ *   <ion-content>
+ *     <ion-toggle ng-model="data.isSubheader">
+ *       Make it a Subheader?
+ *     </ion-toggle>
+ *     <ion-toggle ng-model="data.isShown">
+ *       Show it?
+ *     </ion-toggle>
+ *     <div class="list">
+ *       <div class="item" ng-repeat="item in items">
+ *         {{item}}
+ *       </div>
+ *     </div>
+ *   </ion-content>
+ * </div>
+ */
 .directive('ionHeaderBar', headerFooterBarDirective(true))
 
 /**
@@ -48,6 +90,9 @@ IonicModule
  * Can also be a subfooter (higher up) if the 'bar-subfooter' class is applied.
  * See [the footer CSS docs](/docs/components/#footer).
  *
+ * Note: If you use ionFooterBar in combination with ng-if, the surrounding content
+ * will not align correctly.  This will be fixed soon.
+ *
  * @param {string=} align-title Where to align the title.
  * Avaialble: 'left', 'right', or 'center'.  Defaults to 'center'.
  *
@@ -67,6 +112,46 @@ IonicModule
  * </ion-footer-bar>
  * ```
  */
+/**
+ * @ngdoc demo
+ * @name ionFooterBar#simple
+ * @module footerBarSimple
+ * @javascript
+ * angular.module('footerBarSimple', ['ionic'])
+ * .controller('FooterBarSimpleCtrl', function($scope) {
+ *   $scope.data = {
+ *     isSubfooter: false,
+ *     isShown: true
+ *   };
+ *
+ *   $scope.items = [];
+ *   for (var i = 0; i < 20; i++) {
+ *     $scope.items.push('Item ' + i);
+ *   }
+ * });
+ *
+ * @html
+ * <div ng-controller="FooterBarSimpleCtrl">
+ *   <ion-footer-bar class="bar-assertive"
+ *       ng-class="{'bar-subfooter': data.isSubfooter}"
+ *       ng-show="data.isShown">
+ *     <h1 class="title">Footer</h1>
+ *   </ion-footer-bar>
+ *   <ion-content>
+ *     <ion-toggle ng-model="data.isSubfooter">
+ *       Make it a Subfooter?
+ *     </ion-toggle>
+ *     <ion-toggle ng-model="data.isShown">
+ *       Show it?
+ *     </ion-toggle>
+ *     <div class="list">
+ *       <div class="item" ng-repeat="item in items">
+ *         {{item}}
+ *       </div>
+ *     </div>
+ *   </ion-content>
+ * </div>
+ */
 .directive('ionFooterBar', headerFooterBarDirective(false));
 
 function tapScrollToTopDirective() {