ANGULAR: checkbox on form does not become checked when value from API is returned until I submit the form

Question

I've been stuck on what seems like a very simple problem for the last hour and a half now and any help would be infinitely appreciated because it is driving me insane.

I have a checkbox on a form that I want to appear as checked when the its model that's returned from the API is equal to 1, and not checked when the value is 0. I'm using a very simple checkbox for it.

The checkbox , however is not checked when I load the form and the API returns a value of 1. When I click on the button that submits the entire form, however, the checkbox THEN becomes checked. If I reload the page, the checkbox goes back to being unchecked. Is there something I'm missing here?

Here is the HTML:

<div class="form-group">
    <label class="col-sm-2 control-label">Make Payment Optional</label>
    <div class="col-sm-4 center-checkbox">
        <input type="checkbox"class="center-checkbox" ng-model="formData.paymentMode" ng-true-value="1" ng-false-value="0" validate-servererror="paymentMode"/>
    </div>
</div>

Answer 1

The code is working just fine in this CodePen . I'm setting in the controller the model:

  $scope.formData = {
    paymentMode : 1
  }

Actually sounds like a problem with the digest cycle, as if you were assigning the model somewhere else, maybe a promise or not inside an angular scope?. If this is true, angular is not refreshing the view because it doesn't know about the change, but it refreshes in the digest cycle that occurs when you submit the form.