I have an array of objects that looks like this:

pausedAssessments = [
    {
        id: 0,
        name: 'Name 1',
        paused: false
    },
    {
        id: 1,
        name: 'Name 2',
        paused: false
    },
]

I then render some HTML for each assessment:

<div ng-repeat="pausedAssessment in pausedAssessments">
    <span class="switch">
        <input ng-model="pausedAssessment.paused" name="{{pausedAssessment.name}}" ng-change="onPauseResumeAssessmentHandler(pausedAssessment)" type="checkbox" toggle-btn on-type="success">
    </span>
</div>

And my ng-change function looks like this:

  $scope.onPauseResumeAssessmentHandler = function onPauseResumeAssessmentHandler(systemAssignedAssessment) {
    const { id, paused } = systemAssignedAssessment;
    const clientId = $scope.client.clientId;

    AssessmentsService.pauseResumeAssessment(clientId ,id, !paused);
  };

Now since my input checkbox is binded to pausedAssessment.paused, if I check it the paused property becomes true and the checkbox gets checked, however, I only want it to become checked if AssessmentsService.pauseResumeAssessment(clientId ,id, !paused); does not fail as it's a POST request.

For example, if the checkbox was unchecked and I clicked it, I'd want it to check only if the POST request goes through and for it to either stay unchecked, or to uncheck itself if the POST request fails.

My problem is that since it's binded, it changes the paused property to true and checks itself as soon as its clicked.