Angular UI Bootstrap accordion heading not working correctly with checkbox

I'm using a check box in the heading of the accordion control in bootstrap, but the model will only update the first time it's clicked. Here's the HTML for the accordion:

 <accordion ng-repeat="timesheet in timesheets">
            <accordion-group>
                <accordion-heading>
                    Title
                    <input type="checkbox" ng-model="approvals.timesheetCheckbox" ng-click="approvals.timesheetChecked($event)"/>
                </accordion-heading>
            </accordion-group>
  </accordion>   

the click method is in my typescript controller:

timesheetChecked($event: Event) {
    $event.stopPropagation();
    $event.preventDefault();
}

If I just use the stopPropagation() method by itself it updates the model correctly and the check box is checked, however, it will then refresh the page. The preventDefault() method stops this from happening, but then it will then only update the model once and not check the check box.

I have tried using ng-bind and that will actually update the model with correctly, but it will not change the check box to checked.

If I use the check box outside of the accordion it works as expected and I have no problems with it. I'm not really sure what I am doing wrong here?