Calendar Doodle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div class="container-fluid" ng-controller="MyCtrl">
  <div class="row">
    <div class="col-md-12">
    <h3>
    Sélectionnez un nom
    </h3>
    <label>Nom:</label>
  <select name="selectColor" id="selectColor" ng-model="data.selectedColor">
      <option ng-repeat="option in data.colors" value="{{option}}">{{option}}</option>
  </select>
  <h4>
  Cliquez sur une case vide pour vous ajouter sur ce créneau horaire. Re-cliquez sur une case où vous êtes déjà inscrit pour vous en désinscrire
  </h4>
      <table class="table table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th>
              Doodle Pampa
            </th>
            <th ng-repeat="d in week">
              {{d.day}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="h in hours" ng-click="addHere(d.hours[$parent.$index])">
            <td>
              {{h.hour}}
            </td>
            <td ng-repeat="d in week" ng-click="addHere(d.hours[$parent.$index])">
              {{ d.hours[$parent.$index].value }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>
  <label>Dispo :</label>
  <select name="selectDispoDay" id="selectDispoDay" ng-model="data.selectedDay">
    <option ng-repeat="option in week" value="{{option.day}}">{{option.day}}</option>
  </select>
  <br/>
  <label>De :</label>
  <select name="selectHourBegin" id="selectHourBegin" ng-model="data.selectedHourBegin">
    <option ng-repeat="option in hours" value="{{option.hour}}">{{option.hour}}</option>
  </select>
  <label>à :</label>
  <select name="selectHourEnd" id="selectHourEnd" ng-model="data.selectedHourEnd">
    <option ng-repeat="option in hours" value="{{option.hour}}">{{option.hour}}</option>
  </select>
  <br/>
  

  <br/>
  <button...

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
// http://angular-ui.github.io/ui-calendar/

function MyCtrl($scope) {
  $scope.hours = [{
    hour: "9:00",
    value: ""
  }, {
    hour: "10:00",
    value: ""
  }, {
    hour: "11:00",
    value: ""
  }, {
    hour: "12:00",
    value: ""
  }, {
    hour: "13:00",
    value: ""
  }, {
    hour: "14:00",
    value: ""
  }, {
    hour: "15:00",
    value: ""
  }, {
    hour: "16:00",
    value: ""
  }, {
    hour: "17:00",
    value: ""
  }, {
    hour: "18:00",
    value: ""
  }, {
    hour: "19:00",
    value: ""
  }, {
    hour: "20:00",
    value: ""
  }, {
    hour: "21:00",
    value: ""
  }, {
    hour: "22:00",
    value: ""
  }, {
    hour: "23:00",
    value: ""
  } ]

  $scope.week = [{
    day: "Lundi",
    hours: angular.copy($scope.hours)
  }, {
    day: "Mardi",
    hours: angular.copy($scope.hours)
  },
   { day: "Mercredi", hours: angular.copy($scope.hours) },
   { day: "Jeudi", hours: angular.copy($scope.hours) },
   { day: "Vendredi", hours: angular.copy($scope.hours) },
   { day: "Samedi", hours: angular.copy($scope.hours) },
   { day: "Dimanche", hours: angular.copy($scope.hours) },
   
   ]

  $scope.data = {
    selectedDay: null,
    selectedHourBegin: null,
    selectedHourEnd: null,
    selectedColor: null,
    colors: ["Qeso", "Nelio", "Zello"]
  }

  $scope.debugData = function() {
    alert($scope.data.selectedDay + $scope.data.selectedHourBegin + $scope.data.selectedHourEnd + $scope.data.selectedColor);
  };

  $scope.addCreneau = function() {
    for (var i = 0; i < $scope.week.length; i++) {

      if ($scope.week[i].day == $scope.data.selectedDay) {
        for (var j = 0; j < $scope.week[i].hours.length; j++) {
          if ($scope.isInCreneau($scope.week[i].hours[j].hour) == true) {
            
            $scope.week[i].hours[j].value =...