simple angular checkboxes - angularjs

Question

I have a T/F property called "valid" returning from an API call. I want to accurately display it as a checkbox, as well as allow the user to set/unset it. Setting or unsetting it will make a SAVE call.
{{vm.selectedQuestion}}
<md-checkbox
aria-label="Confirmed"
ng-model="vm.selectedQuestion.valid"
ng-click="vm.setReviewed()"
ng-checked="vm.selectedQuestion.valid">
Valid
</md-checkbox>
.
vm.setReviewed = function () {
vm.selectedQuestion.valid = !vm.selectedQuestion.valid;
// a bunch of other stuff
};
If the question gets loaded with value: true, then I see the checked box. If I uncheck the box, the valid property disappears from the object completely.
I know I'm doing something wrong with the ng-model and the ng-checked, but I've tried every combination I can think of.
Astonishingly, the angular docs and examples do not seem to address this simple case as far as I have found.

Answer 1

I would simply change it to:
{{vm.selectedQuestion}}
<md-checkbox
aria-label="Confirmed"
ng-model="vm.selectedQuestion.valid"
ng-change="vm.setReviewed()">
Valid
</md-checkbox>
with the function:
vm.setReviewed = function () {
// a bunch of other stuff depending on the value of vm.selectedQuestion.valid
};
Usually there is no need to over-complicate it (unless there is something about md-checkbox that I am not aware of). There is also no need to manually toggle the value in the ng-change (it's already changed by ng-model, and the value of vm.selectedQuestion.valid you see in the function is already after the change).
Here is the link for the docs of md-checkbox directive with a clear example:
https://material.angularjs.org/latest/api/directive/mdCheckbox
And the ng-change is as ng-change does, until angular goes v2, and then all bets are off. :)
A few notes on directives in question (with input from OP comment):
ng-click happens before the change of the ng-model and the checkbox in the element
ng-change happens after the change in the ng-model and the element
ng-checked is used only to set the checked attribute of the element if it's evaluated to truthy - should not be used alongside ng-model

Answer 2

Try following snippet
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-checked="name" ng-model="name">{{name}}</div>
</div>
</div>
Hope this will help you