angularjs responsive timetable directive experiment

<!DOCTYPE html>
<html>

  <head>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
    <script data-require="angular-touch@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular-touch.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-app="myApp">
      <div data-ng-controller="MainCtrl">
        <h1>TIMETABLE</h1>
        <h2>Define your timetable slots here</h2>
        <div data-my-timetable="" data-slots="slots"></div>
      </div>
    </div>
  </body>

</html>

angular.module('myApp', []);

angular.module('myApp')
  .controller('MainCtrl', ['$scope', function ($scope) {
  var _slots = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  ];
  
  function _init() {
    $scope.slots = _slots;
  }
      
  _init();
}]);

angular.module('myApp')
    .directive('myTimetable', function () {
    return {
      restrict: 'A',
      templateUrl: 'my-timetable.tpl.html',
      scope: {
        slots: '='
      },
      link: function (scope, element, attributes) {
        var _days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        var _selection = {
          state: false,
          day: [0, 0, 0, 0, 0, 0, 0],
          hour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        };
        
        function _loop(begin, end, step) {
          var array = [];
          
          for (var i = begin; i <= end; i += step) {
            array.push(i);
          }
          
          return array;
        }
        
        function _toggle(what, day, hour) {
          var i = 0;
          
          switch (what) {
            case 'day':
              _selection.day[day] = !_selection.day[day];
              
              for (i = 0; i < 24; i++) {
                scope.slots[day][i] = _selection.day[day]; 
              }
            break;
            
            case 'hour':
              _selection.hour[hour] = !_selection.hour[hour];
              
              for (i = 0; i < 7; i++) {
                scope.slots[i][hour] = _selection.hour[hour];
              }
            break;
            
            case 'slot':
              if (_selection.state) {
                scope.slots[day][hour] = !scope.slots[day][hour];
              }
            break;
          }
        }
        
        function _select(state, day, hour) {
          _selection.state = state;
          
          if (_selection.state) {
            _toggle('slot', day, hour);
          }
        }
        
        function _init() {
          scope.loop = _loop;
          scope.toggle = _toggle;
          scope.select = _select;
          
          scope.days = _days;
        }
        
        _init();
      }
    };
});

html {
  background: #f9f9f9;
  font-family:'Roboto Condensed';
}

h1 {
  width: 100%;
  margin-bottom: 0;
  color: #2cab54;
}

h2 {
  margin-top: 0;
  border-bottom: 1px solid #aaa;
  font-size: 0.9em;
  color: #808080;
}

.my-timetable{
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;   
  
  background: #fff;
  
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.my-timetable th {
  font-size: 0.8em;
  color: #808080;
  cursor: pointer;
}

.my-timetable td {
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.my-timetable td:hover {
  background: orange;
}

.my-timetable .selected {
  background: #2cab54;
}

<table class="my-timetable">
  <colgroup>
    <col span="1" width="9%">
    <col data-ng-repeat="i in loop(0, 8, 1)" span="1" width="13%">
  </colgroup>
  <thead>
    <th></th>
    <th data-ng-repeat="day in days" data-ng-click="toggle('day', $index)">{{day}}</th>
  </thead>
  <tbody>
    <tr data-ng-repeat="i in loop(0, 23, 1)">
      <th data-ng-click="toggle('hour', 0, i)">{{i + ':00'}}</th>
      <td data-ng-repeat="j in loop(0, 6, 1)" data-ng-mousedown="select(true, j, i)" data-ng-mouseup="select(false)" data-ng-mouseover="toggle('slot', j, i)" data-ng-click="toggle('slot', j, i)" data-ng-class="{selected: slots[j][i]}"></td>
    </tr>
  </tbody>
</table>