Angular examples working again

dist/ionic-angular.js

@@ -1,332 +0,0 @@
-angular.module('ionic.ui.content', {})
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    template: '<div class="content"></div>'
-  }
-});
-;angular.module('ionic.ui', ['ngTouch'])
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: true,
-    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}"></div>',
-    compile: function(element, attr, transclude, navCtrl) {
-      return function($scope, $element, $attr) {
-        $scope.hasHeader = attr.hasHeader;
-      };
-    }
-  }
-})
-
-.controller('NavCtrl', function($scope, $element, $compile) {
-  var _this = this;
-
-
-  angular.extend(this, NavController.prototype);
-
-  NavController.call(this, {
-    content: {
-    },
-    navBar: {
-      shouldGoBack: function() {
-      },
-      setTitle: function(title) {
-        $scope.title = title;
-      },
-      showBackButton: function(show) {
-      },
-    }
-  });
-
-  $scope.controllers = this.controllers;
-
-  $scope.getTopController = function() {
-    return $scope.controllers[$scope.controllers.length-1];
-  }
-
-  $scope.pushController = function(controller) {
-    //console.log('PUSHING OCNTROLLER', controller);
-    _this.push(controller);
-  }
-
-  $scope.navController = this;
-})
-
-.directive('navController', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    controller: 'NavCtrl',
-    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div></div>',
-    compile: function(element, attr, transclude, navCtrl) {
-      return function($scope, $element, $attr) {
-      };
-    }
-  }
-})
-
-.directive('navBar', function() {
-  return {
-    restrict: 'E',
-    require: '^navController',
-    transclude: true,
-    replace: true,
-    template: '<header class="bar bar-header bar-dark nav-bar">' + 
-        '<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
-        '<h1 class="title">{{getTopController().title}}</h1>' + 
-      '</header>',
-    link: function(scope, element, attrs, navCtrl) {
-      scope.goBack = function() {
-        navCtrl.pop();
-      }
-    }
-  }
-})
-
-.directive('navContent', function() {
-  return {
-    restrict: 'ECA',
-    scope: true,
-    link: function(scope, element, attrs) {
-      scope.title = attrs.title;
-      scope.isVisible = true;
-      scope.pushController(scope);
-    }
-  }
-});
-;angular.module('ionic.ui', [])
-
-.controller('SideMenuCtrl', function($scope) {
-  var _this = this;
-
-  angular.extend(this, SideMenuController.prototype);
-
-  SideMenuController.call(this, {
-    left: {
-      width: 270,
-      isEnabled: true,
-      pushDown: function() {
-        $scope.leftZIndex = -1;
-      },
-      bringUp: function() {
-        $scope.leftZIndex = 0;
-      }
-    },
-    right: {
-      width: 270,
-      isEnabled: true,
-      pushDown: function() {
-        $scope.rightZIndex = -1;
-      },
-      bringUp: function() {
-        $scope.rightZIndex = 0;
-      }
-    },
-    content: {
-      onDrag: function(e) {},
-      endDrag: function(e) {},
-      getTranslateX: function() {
-        /*
-        var r = /translate3d\((-?.+)px/;
-        var d = r.exec(this.el.style.webkitTransform);
-
-        if(d && d.length > 0) {
-          return parseFloat(d[1]);
-        }
-        */
-        return $scope.contentTranslateX || 0;
-      },
-      setTranslateX: function(amount) {
-        $scope.contentTranslateX = amount;
-        $scope.$apply();
-      },
-      enableAnimation: function() {
-        //this.el.classList.add(this.animateClass);
-        $scope.animationEnabled = true;
-      },
-      disableAnimation: function() {
-        //this.el.classList.remove(this.animateClass);
-        $scope.animationEnabled = false;
-      }
-    }
-  });
-
-  $scope.contentTranslateX = 0;
-})
-
-.directive('sideMenuController', function() {
-  return {
-    restrict: 'E',
-    controller: 'SideMenuCtrl',
-    replace: true,
-    transclude: true,
-    template: '<div class="view"><div ng-transclude></div></div>',
-  }
-})
-
-.directive('sideMenuContent', function() {
-  return {
-    restrict: 'CA',
-    require: '^sideMenuController',
-    compile: function(element, attr, transclude) {
-      return function($scope, $element, $attr, sideMenuCtrl) {
-        window.ionic.onGesture('drag', function(e) {
-          sideMenuCtrl._handleDrag(e);
-        }, $element[0]);
-
-        window.ionic.onGesture('release', function(e) {
-          sideMenuCtrl._endDrag(e);
-        }, $element[0]);
-
-        $scope.$watch('contentTranslateX', function(value) {
-          $element[0].style.webkitTransform = 'translate3d(' + value + 'px, 0, 0)';
-        });
-
-        $scope.$watch('animationEnabled', function(isAnimationEnabled) {
-          if(isAnimationEnabled) {
-            $element[0].classList.add('menu-animated');
-          } else {
-            $element[0].classList.remove('menu-animated');
-          }
-
-        });
-      };
-    }
-  }
-})
-
-
-.directive('menu', function() {
-  return {
-    restrict: 'E',
-    require: '^sideMenuController',
-    replace: true,
-    transclude: true,
-    scope: true,
-    template: '<div class="menu menu-{{side}}" ng-transclude></div>',
-    compile: function(element, attr, transclude, sideMenuCtrl) {
-      return function($scope, $element, $attr) {
-        $scope.side = attr.side;
-      };
-    }
-  }
-})
-;angular.module('ionic.ui', [])
-
-.directive('content', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      hasHeader: '@',
-      hasTabs: '@'
-    },
-    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
-  }
-})
-
-.controller('TabsCtrl', function($scope) {
-  var _this = this;
-
-  angular.extend(this, TabBarController.prototype);
-
-  TabBarController.call(this, {
-    tabBar: {
-      tryTabSelect: function() {},
-      setSelectedItem: function(index) {
-        console.log('TAB BAR SET SELECTED INDEX', index);
-      },
-      addItem: function(item) {
-        console.log('TAB BAR ADD ITEM', item);
-      }
-    }
-  });
-
-  $scope.controllers = this.controllers;
-
-  $scope.$watch('controllers', function(newV, oldV) {
-    console.log("CControlelrs changed", newV, oldV);
-    //$scope.$apply();
-  });
-})
-
-.directive('tabController', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    scope: {},
-    transclude: true,
-    controller: 'TabsCtrl',
-    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
-    compile: function(element, attr, transclude, tabsCtrl) {
-      return function($scope, $element, $attr) {
-      };
-    }
-  }
-})
-
-// Generic controller directive
-.directive('tabContent', function() {
-  return {
-    restrict: 'CA',
-    replace: true,
-    transclude: true,
-    template: '<div ng-show="isVisible" ng-transclude></div>',
-    require: '^tabController',
-    scope: true,
-    link: function(scope, element, attrs, tabsCtrl) {
-      scope.title = attrs.title;
-      scope.icon = attrs.icon;
-      tabsCtrl.addController(scope);
-    }
-  }
-})
-
-
-.directive('tabBar', function() {
-  return {
-    restrict: 'E',
-    require: '^tabController',
-    transclude: true,
-    replace: true,
-    scope: true,
-    template: '<div class="tabs tabs-primary">' + 
-      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
-    '</div>'
-  }
-})
-
-.directive('tabItem', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    require: '^tabController',
-    scope: {
-      title: '@',
-      icon: '@',
-      active: '=',
-      tabSelected: '@',
-      index: '='
-    },
-    link: function(scope, element, attrs, tabsCtrl) {
-      console.log('Linked item', scope);
-      scope.selectTab = function(index) {
-        tabsCtrl.selectController(scope.index);
-      };
-    },
-    template: 
-      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
-        '<i class="{{icon}}"></i> {{title}}' +
-      '</a>'
-  }
-});

dist/ionic-simple.js

@@ -1,207 +0,0 @@
-
-(function(window, document, ionic) {
-
-  ionic.Components = [];
-
-  ionic.registerComponent = function(instance) {
-    ionic.Components.push(instance);
-  };
-
-  ionic.get = function(elementId) {
-    return ionic.component( document.getElementById(elementId) );
-  };
-
-  ionic.component = function(el) {
-    if(el) {
-      if(el.component) {
-        // this element has already been initialized as a component
-        return el.component;
-      }
-      for(var x = 0; x < ionic.Components.length; x++) {
-        if( ionic.Components[x].isComponent(el) ) {
-          // this element is a component, init its view
-          return ionic.Components[x].init(el);
-        }
-      }
-    }
-  };
-
-  function componentEvent(eventName, e) {
-    if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
-
-    var 
-    component,
-    el = e.gesture.srcEvent.target; // get the original source event's target
-
-    while(el) {
-      // climb up the tree looking to see if the target
-      // is or is in a registered component. If its already
-      // been set that its NOT a component don't bother.
-      if(el.isComponent !== false) {
-        component = ionic.component(el);
-        if(component) {
-          component[eventName] && component[eventName](e.gesture.srcEvent);
-          return;
-        }
-        // not sure if this element is a component yet,
-        // keep climbing up the tree and check again
-        // remember that this element is not a component so 
-        // it can skip this process in the future
-        el.isComponent = false;
-      }
-      el = el.parentElement;
-    }
-  }
-
-  function onTap(e) {
-    componentEvent("tap", e);
-  }
-  ionic.on("tap", onTap, window);
-
-  function onDrag(e) {
-    componentEvent("drag", e);
-  }
-  ionic.on("drag", onDrag, window);
-
-  function onRelease(e) {
-    componentEvent("release", e);
-  }
-  ionic.on("release", onRelease, window);
-
-
-  function initalize() {
-    // remove the ready listeners
-    document.removeEventListener( "DOMContentLoaded", initalize, false );
-    window.removeEventListener( "load", initalize, false );
-
-    // trigger that the DOM is ready
-    ionic.trigger("domready");
-  }
-
-  // When the DOM is ready, initalize the webapp
-  if ( document.readyState === "complete" ) {
-    // DOM is already ready
-    setTimeout( initalize );
-  } else {
-    // DOM isn't ready yet, add event listeners
-    document.addEventListener( "DOMContentLoaded", initalize, false );
-    window.addEventListener( "load", initalize, false );
-  }
-
-})(this, document, ionic);;
-(function(ionic) {
-
-  ionic.registerComponent({
-
-    name: "listview",
-
-    isComponent: function(element) {
-      return false;
-    },
-
-    tap: function(e) {
-
-    }
-
-  });
-
-})(ionic);;
-(function(window, document, ionic) {
-
-  ionic.fn = {
-    val: function() {
-      var ret, x;
-      for(x = 0; x < this.length; x++) {
-        ret = this[x].component.val.apply(this[x].component, arguments);
-      }
-      return ret;
-    }
-  }
-
-  if (window.jQuery) {
-    // if jQuery is present then it should be the default
-    jq = window.jQuery;
-
-    // extend the methods which are in ionic.fn and in jQuery.fn
-    for(var name in ionic.fn) {
-      var jQueryFn = jq.fn[name];
-      jq.fn[name] = function() {
-        var 
-        x,
-        ret; // if incase this isn't an ionic component
-
-        for(x = 0; x < this.length; x++) {
-          ionic.component( this[x] );
-          if( this[x].component ) {
-            ret = this[x].component[name].apply(this[x].component, arguments);
-          }
-        }
-
-        // if this isn't an ionic component, run the usual jQuery fn
-        return jQueryFn.apply(this, arguments); 
-      }
-    }
-
-  } else {
-    // jQuery is not already present, so use our 'lil version instead
-    jq = {
-
-      init: function(selector, context) {
-        context = context || document;
-        var 
-        x,
-        dom = context.querySelectorAll(selector) || [];
-        for(x = 0; x < dom.length; x++) {
-          ionic.component( dom[x] );
-        }
-        dom.__proto__ = ionic.fn;
-        dom.selector = selector || '';
-        return dom;
-      }
-
-    };
-
-    $ = function(selector, context) {
-      return jq.init(selector, context);
-    }
-  }
-
-})(this, document, ionic);
-;
-(function(ionic) {
-
-  ionic.registerComponent({
-
-    isComponent: function(el) {
-      // this is a Toggle component if it has a "toggle" classname
-      return el.classList.contains("toggle");
-    },
-
-    init: function(el) {
-      if(el) {
-
-        // check if we've already created a Toggle instance for this element
-        if(!el.component) {
-
-          // find all the required elements that make up a toggle
-          var opts = { 
-            el: el,
-            checkbox: el.querySelector("input[type='checkbox']"),
-            track: el.querySelector(".track"),
-            handle: el.querySelector(".handle")
-          };
-
-          // validate its a well formed toggle with the required pieces
-          if(!opts.checkbox || !opts.track || !opts.handle) return;
-
-          // initialize an instance of a Toggle
-          el.component = new ionic.views.Toggle(opts);
-        }
-
-        return el.component;
-      }
-    }
-
-  });
-
-})(ionic);

dist/ionic.js

@@ -2111,7 +2111,7 @@ ionic.controllers.NavController.prototype = {
 ;/**
  * Adapted from Backbone.js
  */
-(function(window, document, ionic) {
+(function(ionic) {
   var optionalParam = /\((.*?)\)/g;
   var namedParam    = /(\(\?)?:\w+/g;
   var splatParam    = /\*\w+/g;
@@ -2221,7 +2221,7 @@ ionic.controllers.NavController.prototype = {
       return matched;
     },
   };
-})(this, document, ion = this.ionic || {});
+})(window.ionic);
 ;
 (function(ionic) {
 
@@ -2415,8 +2415,6 @@ ionic.controllers.NavController.prototype = {
 })(ionic);
 ;(function(ionic) {
 
-ionic.controllers = ionic.controllers || {};
-
 ionic.controllers.TabBarController = function(options) {
   this.tabBar = options.tabBar;
 
@@ -2536,7 +2534,7 @@ ionic.controllers.TabBarController.prototype = {
   },
 }
 
-})(ionic = window.ionic || {});
+})(window.ionic);
 ;(function(window, document, ionic) {
 
   // polyfill use to simulate native "tap"

js/controllers/routeController.js

@@ -1,7 +1,7 @@
 /**
  * Adapted from Backbone.js
  */
-(function(window, document, ionic) {
+(function(ionic) {
   var optionalParam = /\((.*?)\)/g;
   var namedParam    = /(\(\?)?:\w+/g;
   var splatParam    = /\*\w+/g;
@@ -111,4 +111,4 @@
       return matched;
     },
   };
-})(this, document, ion = this.ionic || {});
+})(window.ionic);

js/controllers/tabBarController.js

@@ -1,7 +1,5 @@
 (function(ionic) {
 
-ionic.controllers = ionic.controllers || {};
-
 ionic.controllers.TabBarController = function(options) {
   this.tabBar = options.tabBar;
 
@@ -121,4 +119,4 @@ ionic.controllers.TabBarController.prototype = {
   },
 }
 
-})(ionic = window.ionic || {});
+})(window.ionic);

js/ext/angular/src/ionicNav.js

@@ -19,9 +19,9 @@ angular.module('ionic.ui', ['ngTouch'])
   var _this = this;
 
 
-  angular.extend(this, NavController.prototype);
+  angular.extend(this, ionic.controllers.NavController.prototype);
 
-  NavController.call(this, {
+  ionic.controllers.NavController.call(this, {
     content: {
     },
     navBar: {

js/ext/angular/src/ionicSideMenu.js

@@ -3,9 +3,9 @@ angular.module('ionic.ui', [])
 .controller('SideMenuCtrl', function($scope) {
   var _this = this;
 
-  angular.extend(this, SideMenuController.prototype);
+  angular.extend(this, ionic.controllers.SideMenuController.prototype);
 
-  SideMenuController.call(this, {
+  ionic.controllers.SideMenuController.call(this, {
     left: {
       width: 270,
       isEnabled: true,

js/ext/angular/src/ionicTabBar.js

@@ -16,9 +16,9 @@ angular.module('ionic.ui', [])
 .controller('TabsCtrl', function($scope) {
   var _this = this;
 
-  angular.extend(this, TabBarController.prototype);
+  angular.extend(this, ionic.controllers.TabBarController.prototype);
 
-  TabBarController.call(this, {
+  ionic.controllers.TabBarController.call(this, {
     tabBar: {
       tryTabSelect: function() {},
       setSelectedItem: function(index) {

js/ext/angular/test/nav.html

@@ -6,7 +6,7 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../dist/ionic.css">
+    <link rel="stylesheet" href="../../../../dist/ionic.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
@@ -47,8 +47,8 @@
       </content>
     </nav-controller>
 
-    <script src="../js/NavController.js"></script>
-    <script src="../js/NavAngular.js"></script>
+    <script src="../../../../dist/ionic.js"></script>
+    <script src="../src/ionicNav.js"></script>
     <script>
       var pageNumber = 0;
 

js/ext/angular/test/sideMenuAngular.html

@@ -6,11 +6,10 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../dist/ionic.css">
-    <script src="/vendor/angular/1.2.0rc2/angular.js"></script>
-    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
-    <script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
-
+    <link rel="stylesheet" href="../../../../dist/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
   </head>
   <body>
 
@@ -36,10 +35,8 @@
         <h2>Right</h2>
       </menu>
     </side-menu-controller>
-    <script src="../../js/ionic-events.js"></script>
-    <script src="../../js/ionic-gestures.js"></script>
-    <script src="SideMenuController.js"></script>
-    <script src="SideMenuAngular.js"></script>
+    <script src="../../../../dist/ionic.js"></script>
+    <script src="../src/ionicSideMenu.js"></script>
     <script>
       angular.module('sideMenuTest', ['ionic.ui'])
 

js/ext/angular/test/tabs.html

@@ -3,10 +3,8 @@
     <meta charset="utf-8">
     <title>Tab Bars</title>
 
-    <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../dist/ionic.css">
+    <link rel="stylesheet" href="../../../../dist/ionic.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
@@ -51,8 +49,8 @@
       </div>
     </tab-controller>
 
-    <script src="TabBarController.js"></script>
-    <script src="TabAngular.js"></script>
+    <script src="../../../../dist/ionic.js"></script>
+    <script src="../src/ionicTabBar.js"></script>
     <script>
       angular.module('tabsTest', ['ionic.ui'])
 

test/controllers/nav.html

@@ -6,7 +6,7 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../dist/ionic.css">
+    <link rel="stylesheet" href="../../dist/ionic.css">
   </head>
   <body>
 
@@ -20,10 +20,7 @@
       </main>
     </section>
 
-    <script src="../../js/events.js"></script>
-    <script src="../../js/gestures.js"></script>
-    <script src="../../js/views/navBar.js"></script>
-    <script src="../../js/controllers/navController.js"></script>
+    <script src="../../dist/ionic.js"></script>
     <script>
       // Grab the sections
       var navBar = document.getElementById('nav-bar');
@@ -81,7 +78,7 @@
       var pages = [page1, page2, page3, page4];
 
       var c = new ionic.controllers.NavController({
-        navBar: new ionic.ui.NavBar({ el: navBar }),
+        navBar: new ionic.views.NavBar({ el: navBar }),
         content: content
       });
       c.push(page1);

test/controllers/navList.html

@@ -1,90 +0,0 @@
-<html ng-app="navTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Nav List</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../dist/ionic.css">
-    <script src="/vendor/angular/1.2.0rc2/angular.js"></script>
-    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
-    <script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
-    <style>
-      .reveal-animation {
-        /*
-        -webkit-transform: translate3d(0%, 0, 0);
-                transform: translate3d(0%, 0, 0);
-
-       -webkit-transition: -webkit-transform 1s ease-in-out;
-               transition:         transform 1s ease-in-out;
-        */
-      }
-      .reveal-animation.ng-enter {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(100%,0,0) ;
-      }
-      .reveal-animation.ng-enter-active {
-        -webkit-transform:translate3d(0,0,0) ;
-      }
-      .reveal-animation.ng-leave {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(0%,0,0);
-      }
-      .reveal-animation.ng-leave-active {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(-100%,0,0);
-      }
-    </style>
-
-  </head>
-  <body>
-
-    <nav-controller>
-      <nav-bar></nav-bar>
-      <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
-      </content>
-    </nav-controller>
-
-    <script src="NavController.js"></script>
-    <script src="NavAngular.js"></script>
-    <script>
-      var pageNumber = 0;
-
-      var pushIt = function($scope, $compile, $element, cb) {
-        var childScope = $scope.$new();
-        childScope.isVisible = true;
-
-        pageNumber++;
-
-        var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
-          '<h1>' + pageNumber + '</h1>' +
-          '<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
-          '</div>')(childScope, cb);
-      }
-
-      angular.module('navTest', ['ionic.ui'])
-
-      .controller('AppCtrl', function($scope, $compile, $element) {
-
-        $scope.items = [
-          { text: 'Hello' }
-        ];
-        pushIt($scope, $compile, $element, function(cloned, scope) {
-          $element.append(cloned);
-        })
-
-      })
-
-      .controller('CatsCtrl', function($scope, $compile, $element) {
-        console.log('Cats', $element);
-        $scope.goNext = function() {
-          pushIt($scope, $compile, $element, function(cloned, scope) {
-            $element.parent().append(cloned);
-          })
-        };
-      });
-    </script>
-  </body>
-</html>
-