angularjs - 潜在的な AngularJS ng-repeat/ng-switch の問題

Question

AngularJS を使用してボックスのグリッドを作成しようとしています。私はこのフィドルでアプローチを簡素化し、問題をよく示しています。

それは私が ng-switch を使用している方法かもしれませんが、0 または 1 をクリックするとデータ (グリッドの上部に表示) と DOM が更新されますが、2 を更新するとデータは正しく更新されますが、 2 の代わりに「12」が更新されます。このパターンは上に行くほど続きます。オブジェクトが 10 個未満の場合、すべて正常に動作しているように見えますが、それ以上になると機能しなくなります。

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>

これがフィドルリンクです。

潜在的な問題は次のとおり
です。 データをフォーマット
する方法 ng-switch を使用する方法
?????

ありがとう。