javascript - Button not toggling colours -

this button working until added toggle functionality, toggle button submits information. it's supposed change colour of page. ideas? i've left previous working button commented out.

.hg { background-color: #5b3768; } .hg h1 { color: #fff; } .hg h2 { color: #fff; } .hg h3 { color: #fff; } .hg h4 { color: #fff; } .hg h5 { color: #fff; } .hg h6 { color: #fff; } .hg p { color: #fff; } .hg th {background: #fff; color: #5b3768;} .hg tr {color: #fff;}  .normal { background-color: #fff; } .normal h1 { color: #000; } .normal h2 { color: #000; } .normal h3 { color: #000; } .normal h4 { color: #000; } .normal h5 { color: #000; } .normal h6 { color: #000; } .normal p { color: #000; } .normal th {background: #ff9500; color: #fff;} .normal tr {color: #000;} 

<div>        <!-- <button class="btn btn-info" ng-click="colorscheme = 'hg'">hg theme</button> -->     <button toggle-button ng-model="eventdata.themehg">         <span ng-show="eventdata.themehg" ng-click="colorscheme = 'hg'">hg theme</span>         <span ng-hide="eventdata.themehg" ng-click="colorscheme = 'normal'">hg theme disable</span>     </button> 

this works sort of, doesn't change colour adds enable disable

i'd suggest creating schemeswitcher function actual switching:

    $scope.togglescheme = function (sheme) {         switch (sheme) {             case 'hg': $scope.colorscheme = 'hg';                 break;             case 'hg-disabled': $scope.colorscheme = 'normal';                 break;         }     }; 

then in html in ng-click call function:

<button type="button" ng-click="togglescheme('hg')">hg theme</button> <button type="button" ng-click="togglescheme('hg-disabled')">hg theme disable</button> 

demo: http://jsfiddle.net/cg8gy13j/3/