<!DOCTYPE html>
<html ng-app="sieve">

  <head>
    <meta content="width=device-width, height=device-height, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link data-require="ionic@1.0.0-beta.11" data-semver="1.0.0-beta.11" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" />
  </head>

  <body>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    
    <script data-require="ionic@1.0.0-beta.11" data-semver="1.0.0-beta.11" src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
    <script>
    
      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      
      var sieve = angular.module("sieve", ["ionic"]);
      sieve.config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/main');
        $stateProvider.state('main', {
          url: '/main',
          templateUrl: 'main.html',
          controller: function($scope, $log, $state){
            $scope.goLeak = function(){
              $state.go('leak');
            };
          }
        }).state('leak',{
          url: '/leak',
          controller: function($scope, $log, $state){
            $scope.cats = [];
            for(var i=0; i < 1000; i++){
              var size = getRandomInt(1,5) * 100;
              $scope.cats.push({src:"http://placekitten.com/g/" + size.toString() + "/" + size.toString() + "?stamp=" + (new Date()).valueOf().toString()});
            }
            $scope.$on('$destroy', function(){
              $scope.cats = null;
            });
            $scope.goMain = function(){
              $state.go('main');
            };
          },
          templateUrl: 'leak.html'
        })
      });
      
    </script>
  </body>

</html>

<ion-view title="Main" name="main">
  <ion-content has-bouncing="true" scroll="true">
    <div>
      <h2>Main</h2>
      <div>
        This page probably leaks as well, but it won't show it like the
        leaky page does.
      </div>
      <button ng-click="goLeak()">Get Leaky!</button>
    </div>
  </ion-content>
</ion-view>
<ion-view title="Leak" name="leak">
  <ion-content has-bouncing="true" scroll="true">
    <div>
      <h2>Leaking cuteness!</h2>
      <button ng-click="goMain()">Main</button>
      <div ng-repeat="cat in cats">
        <h4>URL: {{cat.src}}</h4>
        <img src="{{cat.src}}" />
        <div>
          I feel like I need some different nodes in here for reasons.
        </div>
        <canvas height="50" width="50">
        </canvas>
        <p>
          How about a paragraph thing
        </p>
        <pre>
          Some preformatted text for you! Hooray!
        </pre>
        <b>OLD AND BOLD</b>
      </div>
    </div>
  </ion-content>
</ion-view>