angular ng-switch not switching between options but appending them

Question

I have the following in my controller which is the variable that the ng-switch depends on:

$scope.currentClock = {state: true};

This is what I use to change the value of currentClock.state:

<timepanel>
  <div id="hour"  ng-click="currentClock.state = true">12</div>
  <div id="minute" ng-click="currentClock.state = false">00</div>
</timepanel>

I have also tried using a function in the ng-click instead, with the same results, here is the function in (from my controller):

$scope.changeClock = function(elm){

   $scope.currentClock.state = elm;

} 

And finally here is my ng-switch:

<clockcontainer>
 <div ng-switch on="currentClock.state">
  <minuteclock ng-switch-when=false></minuteclock>
  <hourclock ng-switch-when=true></hourclock>
 </div>
<clockcontainer>

The problem is: The hourclock directive appears as default, as it should since currentClock.state is true, but when I click on the minute div, setting currentClock.state to false, instead of hourclock going away and minuteclock taking its place, it gets appended with the minuteclock directive, and when I click again on the hour div, now there is two hourclock directives