I have implemented a checkbox in the header of an accordion control using Bootstrap. However, I am facing an issue where the model only updates the first time the checkbox is clicked. Below is the HTML code for the accordion:
<accordion ng-repeat="timesheet in timesheets">
<accordion-group>
<accordion-heading>
Title
<input type="checkbox" ng-model="approvals.rejected" ng-click="approvals.timesheetChecked($event)"/>
</accordion-heading>
</accordion-group>
</accordion>
The click method is defined in my TypeScript controller:
timesheetChecked($event: Event) {
$event.stopPropagation();
$event.preventDefault();
}
When I use just the stopPropagation() method, the model updates correctly and the checkbox gets checked. However, it then triggers a page refresh. Adding the preventDefault() method prevents the refresh, but the model only updates once and doesn't check the checkbox.
I also attempted to use ng-bind, which successfully updates the model but does not mark the checkbox as checked.
Interestingly, when I place the checkbox outside of the accordion, it functions as expected without any issues. I'm unsure of what mistake I might be making in this situation?