Template For multi-page Ionic with menu

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet">
  <!-- ionic/angularjs js -->
  <script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="myApp">
    <ion-nav-view></ion-nav-view>
</body>
</html>

angular.module('myApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "menu.html",
      controller: 'AppCtrl'
    })
    .state('app.home', {
      url: '/home',
      views: {
        'menuContent':{
          templateUrl: 'home.html',
          controller: 'HomeController'
        }
      }
    })
    .state('app.about', {
      url: '/about',
      views: {
        'menuContent':{
          templateUrl: 'about.html',
          controller: 'AboutController'
        }
      }
    });
    $urlRouterProvider.otherwise('/app/home');
})
.controller('AppCtrl',function($scope, $location) {})
.controller('HomeController',function($scope, $location) {
    $scope.title = "Home Page";
    $scope.items = [{"name":"Item 1"},{"name":"Item 2"},
                    {"name":"Item 3"},{"name":"Item 4"},
                    {"name":"Item 5"},{"name":"Item 6"},
                    {"name":"Item 7"},{"name":"Item 8"},
                    {"name":"Item 9"},{"name":"Item 10"},
                    {"name":"Item 11"},{"name":"Item 12"},
                    {"name":"Item 13"},{"name":"Item 14"},
                    {"name":"Item 15"},{"name":"Item 16"},
                    {"name":"Item 17"},{"name":"Item 18"},
                    {"name":"Item 19"},{"name":"Item 20"}];
})
.controller('AboutController',function($scope, $location) {
    $scope.title = "About Page";
});

/* Styles go here */

.grid .myItem {
  background-color: #595959;
  display: inline-block;
/*  float: left;*/
  font-size: 0.8em;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 10px;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
  white-space: normal !important;
	height: 160px;
	width: 140px;
}
.grid .myItem:nth-child(2n+2) {
    background-color: #003F72;
    color: #fff;
}
.grid .myItem:first-child{
	margin-left: 10px;
}
.grid{
  width: 3020px;
}
.wrap{
    background-color: transparent;
    color: #000;
    height: 200px;
    max-width: 1200px;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}

<ion-view title="{{title}}" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content>
      <div class="wrap">
        <div class="grid">
          <div class="myItem" ng-repeat="item in items">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="grid">
          <div class="myItem" ng-repeat="item in items">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="grid">
          <div class="myItem" ng-repeat="item in items">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="grid">
          <div class="myItem" ng-repeat="item in items">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="grid">
          <div class="myItem" ng-repeat="item in items">
            {{item.name}}
          </div>
        </div>
      </div>
    </ion-content>
    <div class="bar bar-footer bar-stable">
        <div class="title">
           Bam! A Footer!
        </div>
    </div>
</ion-view>

<ion-view title="{{title}}" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content>
        About this!
    </ion-content>
    <div class="bar bar-footer bar-stable">
        <div class="title">
           Bam! Another Footer!
        </div>
    </div>
</ion-view>

<ion-side-menus>
  <ion-pane ion-side-menu-content edge-drag-threshold="true">
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="left">
    <ion-content>
      <ion-list>
        <a class="item item-icon-right" href="#/app/home">
          Home
          <i class="icon ion-chevron-right"></i>
        </a>
        <a class="item item-icon-right" href="#/app/about">
          About
          <i class="icon ion-chevron-right"></i>
        </a>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>