Button toggle in HTML or Controller - html

Question

I have the following HTML below. I use AngularJS as framework and I will switch from on to off and back.
My question now would be how to switch the two buttons off and on - is it possible only to do it in html or do I need to handle it in the controller?
<div ng-click="vm.makeSomethingInController(scheduleResponseContent)" ng-show="vm.changeService">
<button class="btn btn-xs btn-default" >ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>
Function in the controller:
function setTriggerForLoadingOriginalSchedule(scheduleResponseContent) {
vm.schedulepresenceonly = !vm.schedulepresenceonly;
loadScheduleResponseOfUser(getCurrentDate(), '', vm.viewType, true, scheduleResponseContent.institutionUserConnectionId);
}
Thanks a lot!

Answer 1

You can use ng-hide and ng-show
like this
<button ng-show="schedulepresenceonly" class="btn btn-xs btn-default" >ON</button>
<button ng-hide="schedulepresenceonly" class="btn btn-xs btn-primary active">OFF</button>
or just ng-if
Like this
<button ng-if="schedulepresenceonly" class="btn btn-xs btn-default" >ON</button>
<button ng-if="!schedulepresenceonly" class="btn btn-xs btn-primary active">OFF</button>

Answer 2

Purely It depends On your Problem domain or What Problem Domain Says for you man for example , I have problem domain says When the user will click the ON button he/she get in to the different path(Page view) and if it is OFF button routes to different path(Page view).
Example,
In HTML
<button class="btn btn-xs btn-default" data-ng-click="success()">ON</button>
<button class="btn btn-xs btn-default" data-ng-click="failure()">OFF</button>
In Controller
$scope.success = function(){
<---Put Your Code--->
console.log('Success Path');
$location.url('/success');
}
$scope.failure = function(){
<---Put Your Code--->
console.log('Failure Path');
$location.url('/failure');
}