<div ng-switch="view">
  <div ng-switch-when="date">
    <table>
      <thead>
      <tr>
        <th ng-click="prev()">‹</th>
        <th colspan="5" class="switch" ng-click="setView('month')">{{date|date:"yyyy MMMM"}}</th>
        <th ng-click="next()">›</i></th>
      </tr>
      <tr>
        <th ng-repeat="day in weekdays" style="overflow: hidden">{{ day|date:"EEE" }}</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="week in weeks">
        <td ng-repeat="day in week">
          <span
            ng-class="{'now':isNow(day),'active':isSameDay(day),'disabled':(day.getMonth()!=date.getMonth()),'after':isAfter(day),'before':isBefore(day)}"
            ng-click="setDate(day)" ng-bind="day.getDate()"></span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="year">
    <table>
      <thead>
      <tr>
        <th ng-click="prev(10)">‹</th>
        <th colspan="5" class="switch">{{years[0].getFullYear()}}-{{years[years.length-1].getFullYear()}}</th>
        <th ng-click="next(10)">›</i></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td colspan="7">
                    <span ng-class="{'active':isSameYear(year),'now':isNow(year)}"
                          ng-repeat="year in years"
                          ng-click="setDate(year)" ng-bind="year.getFullYear()"></span>


        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="month">
    <table>
      <thead>
      <tr>
        <th ng-click="prev()">‹</th>
        <th colspan="5" class="switch" ng-click="setView('year')">{{ date|date:"yyyy" }}</th>
        <th ng-click="next()">›</i></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td colspan="7">
                <span ng-repeat="month in months"
                      ng-class="{'active':isSameMonth(month),'after':isAfter(month),'before':isBefore(month),'now':isNow(month)}"
                      ng-click="setDate(month)">{{month|date:'MMM'}}</span>

        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="hours">
    <table>
      <thead>
      <tr>
        <th ng-click="prev(24)">‹</th>
        <th colspan="5" class="switch" ng-click="setView('date')">{{ date|date:"dd MMMM yyyy" }}</th>
        <th ng-click="next(24)">›</i></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td colspan="7">
                <span ng-repeat="hour in hours"
                      ng-class="{'now':isNow(hour),'active':isSameHour(hour)}"
                      ng-click="setDate(hour)" ng-bind="hour.getHours()+':00'"></span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="minutes">
    <table>
      <thead>
      <tr>
        <th ng-click="prev()">‹</th>
        <th colspan="5" class="switch" ng-click="setView('hours')">{{ date|date:"dd MMMM yyyy" }}
        </th>
        <th ng-click="next()">›</i></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td colspan="7">
                    <span ng-repeat="minute in minutes"
                          ng-class="{active:isSameMinutes(minute),'now':isNow(minute)}"
                          ng-click="setDate(minute)">{{minute|date:"HH:mm"}}</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
