checkbox value does not update correctly

I have a few checkboxes that when clicked, true or false will be stored in MongoDB as message.highlighted. Also I have a function where only 3 checkboxes can be clicked. But when I check these boxes, and I refresh the page, the checkboxes are checked, but I have to click the checkbox twice to change the value again

What am I doing wrong?

This is the html:

<input type="checkbox" ng-model="message.checked" ng-checked="message.highlighted" ng-change="check(message, message._id, $index)" ng-disabled="!message.checked && checkedNumber === limitNumber">

This is my angularJS:

$scope.checkedNumber = 0;
  $scope.limitNumber = 3;
  $scope.check = function(message, id) {
    console.log(message.checked)
    if (message.checked) {
      $scope.checkedNumber++;
    } else {
      $scope.checkedNumber--;
    }
    $http({
      method: 'POST',
      url: 'highlightItem',
      params: {
        id: id,
        checked: message.checked,
      }
    }).then(function successCallBack(response){

    });
  };