<!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 rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">

  <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>


  <script src="script.js"></script>
</head>

<body ng-app='employees' ng-controller="MyCtrl">

  <ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark" align-title="center">
        <button class="button button-icon" ng-click="toggleCompanies()">
          <i class="icon ion-navicon"></i>
        </button>
        <h1 class="title large">Employees</h1>

      </ion-header-bar>
          <ion-header-bar class="bar-dark bar-subheader">
      <div class="small">Alphabetic</div>
    </ion-header-bar>
      <ion-content>
        <ion-list class="item-text-wrap">
          <ion-item class="item item-button-right" ng-repeat="employee in employees">
<span>{{employee.name}}</span>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Companies</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item>
            <i class='ion-checkmark-circled'></i>Company ABC
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>

</body>

</html>
angular.module('employees', ['ionic'])

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.title = 'Ionic';

  $scope.toggleCompanies = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  

  $scope.employees = [{
      "id": 10,
      "name": "Gary",

    },{
      "id": 9,
      "name": "Michael",
    }, {
      "id": 10,
      "name": "Randy",
    }, {
      "id": 10,
      "name": "Sherry",

    }
  ];
});
/* Styles go here */


.large {
    font-size: 30px;
}

.small {
  font-size: 14px;
  text-align: center;
}