Checkbox only updates model after second click

Question

Please look at the following Plunkr: http://plnkr.co/edit/hwVL3xtnD9hGJLpULDjI?p=preview

When you click the checkbox the first time the model doesn't update. Why does this happens?

var app = angular.module('main', ['ngMaterial'])
    .controller('DemoCtrl', function($scope, $filter, $http) {
      $scope.propdata = [];
      $scope.success ="loading..";
      var url = "api.json";
       $http({url:url,
         method:"GET"
       }).then(function (rs){
         $scope.propdata = rs.data[0];
         $scope.success ="done..";
       });
    });

Answer 1

You json is returning has a 1 value, not a true or false. If you change your data to true or false, it will recognize the initial value. Another option is to cast the "1" to boolean, and then assign it.

Edit:

Another option is to set the ng-true-value and ng-false-value on your checkbox, so it recognizes the 0 and 1 values you are using. Notice the simple quotes after the double ones "'1'" to recognize the string. Example here:

HTML

<div class="checkbox {{font_size}}">
     <label for="garden_service">
          <input type="checkbox" id="garden_service"
                      ng-checked="propdata.garden_service==1" ng-true-value="'1'" ng-false-value="'0'"
                       ng-model="propdata.garden_service">Garden Service <br/>model value:{{propdata.garden_service}}
     </label>
</div>

http://plnkr.co/edit/t280UjC3NYNtQt28W1wm?p=preview

Official docs link: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D