ng-class for selected button - angularjs

Question

I'm building a widget in ServiceNow and am trying to incorporate some css styling for a selected button. After digging around online, I think I got the basic structure down, but am still a bit confused about how to ensure a button has been selected and then styling it accordingly.
Below is what my HTML looks like:
<div class="chiclets">
<button class="btn btn-slots" ng-class="{'btn-selected':selectedSlot.apptTime == slot.apptTime }" ng-click="selectedSlot = time" ng-repeat="time in c.availTime">{{time.apptTime}}</button>
</div>
This produces a set of available time slots from my c.availTime object array:
My client script for the object array looks like this:
$scope.getTimeSlots = function(date, place) {
date = moment(date).format("YYYY-MM-DD")
//every time a date is chosen, first clear time array
c.availTime = [];
for(var a=0; a<c.data.avail.length; a++){
if(date == c.data.avail[a].start_date && place == c.data.avail[a].appointment_location) {
c.availTime.push({
apptTime:c.data.avail[a].start_time,
availability: c.data.avail[a].availability
});
}
}
};
My question is if a user clicks on 9am time slot for example, is my ng-click capturing that time correctly. If so, how do I format my ng-class so that the btn-selected class has a background of red (for example).
Thanks!

Answer 1

Your test is selectedSlot.apptTime == slot.apptTime.
Shouldn't it be selectedSlot.apptTime == time.apptTime?
Because I don't see a slot variable.
I guess the test could even be selectedSlot == time (same reference).

Answer 2

Create one more property isSelected = false and set it as true on ng-click and apply class if isSelected property is true.
See code below
css
<style>
.btn-selected {backgraound-color:red}
</style>
html
<div class="chiclets">
<button class="btn btn-slots" ng-class="{'btn-selected':time.isSelected == true }" ng-click="btnClick($index)" ng-repeat="time in c.availTime">{{time.apptTime}}</button>
</div>
Js
$scope.getTimeSlots = function(date, place) {
date = moment(date).format("YYYY-MM-DD")
//every time a date is chosen, first clear time array
c.availTime = [];
for(var a=0; a<c.data.avail.length; a++){
if(date == c.data.avail[a].start_date && place == c.data.avail[a].appointment_location) {
c.availTime.push({
apptTime:c.data.avail[a].start_time,
availability: c.data.avail[a].availability,
isSelected : false
});
}
}
};
$scope.btnClick = function(index) {
angular.foreach( c.availTime,function(v,k){
if(k == index){
v.isSelected = true;
} else {
v.isSelected = false;
}
})
}