Potential AngularJS ng-repeat/ng-switch issue

Question

I'm trying to use AngularJS to create a grid of boxes. I've simplified my approach in this fiddle and it illustrates the issue well.

It may be the way i am using ng-switch, but you can see if you click 0 or 1 it updates the data (shown across the top of the grid) and the DOM, but if you update 2 it updates the data correctly but the "12" is updated instead of 2. The pattern continues the higher you go. If you have less than 10 objects all appears to be working properly, but any more than that it breaks.

Here is the HTML:

<div class="day" ng-controller="Controller" >
    {{hours}}
    <div ng-click="hourClick($index)" ng-repeat="hour in hours" ng-switch="$index % 4" class="quarter-hour">
        <div class="clock-back-1" ng-switch-when="0">{{$index}} - {{hour}}
        </div>
        <div class="clock-back-2" ng-switch-when="1">{{$index}} - {{hour}}
        </div>
        <div class="clock-back-3" ng-switch-when="2">{{$index}} - {{hour}}
        </div>
        <div class="clock-back-4" ng-switch-when="3">{{$index}} - {{hour}}
        </div>
    </div>

</div>
<script>
  function Controller($scope){
     $scope.hours = {};
    for (var i=0;i<20;i++){
        $scope.hours[i] = 0;
    }
    $scope.hourClick = function(index){
        $scope.hours[index] = 1;
    }
  }
</script>

Here is the fiddle link again.

Potential issues may be:
They way I format my data
The way I use ng-switch
?????

Thanks.

Answer 1

It was the way I was creating the data. I needed to create an array with object. This code seems to fix the issue. Here is a link to a revised fiddle

<div class="day" ng-controller="Controller" >
    {{hours}}
    <div ng-click="hourClick($index)" ng-repeat="hour in hours" ng-switch="$index % 4" class="quarter-hour">
        <div class="clock-back-1" ng-switch-when="0">{{$index}} - {{hour.id}}
        </div>
        <div class="clock-back-2" ng-switch-when="1">{{$index}} - {{hour.id}}
        </div>
        <div class="clock-back-3" ng-switch-when="2">{{$index}} - {{hour.id}}
        </div>
        <div class="clock-back-4" ng-switch-when="3">{{$index}} - {{hour.id}}
        </div>
    </div>

</div>
<script>
  function Controller($scope){
     $scope.hours = [];
    for (var i=0;i<20;i++){
        $scope.hours[i] = {"id":0};
    }
    $scope.hourClick = function(index){
        $scope.hours[index].id = 1;
    }
  }
</script>