Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Seed App</title>

    <link href="http://code.ionicframework.com/0.9.23/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.23/js/ionic.js"></script>
    <script src="http://code.ionicframework.com/0.9.23/js/angular/angular.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.23/js/angular/angular-animate.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.23/js/angular/angular-sanitize.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.23/js/angular-ui/angular-ui-router.min.js"></script>
    <script src="http://code.ionicframework.com/0.9.23/js/ionic-angular.js"></script>

    <!-- your app's script -->
    <script src="script.js"></script>
  </head>

  <body ng-app="starter" animation="slide-left-right-ios7">

    <nav-bar type="bar-positive"
             animation="nav-title-slide-ios7"
             back-button-type="button-icon"
             back-button-icon="ion-ios7-arrow-back"></nav-bar>

    <nav-view></nav-view>

  </body>
</html>

window.items = [];
for(var i = 0; i < 300; i++) {
  window.items.push({
    title: 'Task ' + (i + 1)
  });
}

angular.module('starter', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {
	$stateProvider
	.state('tab', {
		url: "/tab",
		abstract: true,
		templateUrl: 'tabs.html'
	})

	.state('tab.todo', {
		url: '/todo',
		views: {
			'todo-tab': {
				templateUrl: 'todo.html',
				controller: 'TodoCtrl'
			}
		}
	})
    .state('tab.other', {
		url: '/other',
		views: {
			'other-tab': {
				templateUrl: 'other.html',
				controller: 'OtherCtrl'
			}
		}
	});
	$urlRouterProvider.otherwise('/tab/todo');
})

.controller('TodoCtrl', function($scope) {
  $scope.items = window.items;
})

.controller('OtherCtrl', function($scope) {
  $scope.hello = "Hi there!";
})

.directive('postRepeatDirective', ['$timeout', function ($timeout) {
		return function (scope) {
			if (scope.$first) {
				if (window.console && window.console.time) {
					console.time('postRepeatDirective');
				}
				else {
					window.a = new Date();   // window.a can be updated anywhere if to reset counter at some action if ng-repeat is not getting started from $first
				}
			}

			if (scope.$last) {
				$timeout(function () {
					if (window.console && window.console.time) {
						console.time('postRepeatDirective');
						console.timeEnd('postRepeatDirective');
					}
					else {
						if (window.console) {
							console.log("## DOM rendering list took: " + (new Date() - window.a) + " ms");
						}
					}
				});
			}
		};
	}
]);

/* Styles go here */

<tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
  <tab title="Todo" icon="icon ion-home" href="#/tab/todo">
    <nav-view name="todo-tab"></nav-view>
  </tab>

  <tab title="Other" icon="icon ion-heart" href="#/tab/other">
    <nav-view name="other-tab"></nav-view>
  </tab>
</tabs>

<view title="'Todo'">
	<content has-header="true" has-tabs="true" >
	{{hello}}
	</content>
</view>

<view title="'Todo'">
	<content has-header="true" has-tabs="true" >
		<list>
			<item ng-repeat="item in items" type="item-text-wrap" post-repeat-directive>
				<h3>{{item.title}}</h3>
			</item>
		</list>
	</content>
</view>