AngularJS ng-change doesn't work on checked checkbox

Question

I have a list of to-dos with checkboxes. Checked boxes are marked as "Done" to-dos and unchecked ones are marked as "Undone". Everything is working fine when I check then uncheck an initially unchecked box. It correspondingly being marked "Done" when checked, then "Undone" when I uncheck it back.

But, the problem goes when I uncheck an initially checked box. Nothing happens. It should suppose to be marked as "Undone" because I unchecked it. After that, I would check back the box and there the ng-change triggers but it doesn't mark the to-do as "Done" but "Undone", when a checked box should supposedly be a "Done" to-do.

HTML :

<input icheck type="checkbox"
       ng-model="toDo.value.members.status.value"
       ng-change="vm.markAs(toDo.value.instanceId)"
       ng-click="vm.markAs(toDo.value.instanceId)"
       ng-init="toDo.value.members.status.value === 'Undone'"
       ng-checked="toDo.value.members.status.value === 'Done'">
<span class="m-l-xs">{{ toDo.value.title }}</span>

Controller :

function markAs(id) {    
    todolistService.getToDo(id).then(function (response) {
        vm.toDoStatus = response.data.members.status.value;
        if (vm.toDoStatus == 'Undone') {
            console.log('Done');
            todolistService.markAsDone(id).then(function () {
                notifyService.success($translate.instant('MSG_TODO_MARK_AS_DONE_SUCCESS'));
            }, function (error) {
                notifyService.showError(error);
            });
        } else if (vm.toDoStatus == 'Done') {
            console.log('Undone');
            todolistService.markAsUndone(id).then(function () {
                notifyService.success($translate.instant('MSG_TODO_MARK_AS_UNDONE_SUCCESS'));
            }, function (error) {
                notifyService.showError(error);
            });
        }
    }, function (error) {
        notifyService.showError(error);
    });
}

I hope you understand the problem.

Answer 1

Try changing:

function markAs(id) {  

To:

vm.markAs = function(id) {

Answer 2

I think it's because the status is not instantiated.

Then status is not equal to 'Done' or 'Undone' he's null or empty.

try

if(vm.toDoStatus == 'Undone' || vm.toDoStatus == undefined)

Instead of

if (vm.toDoStatus == 'Undone')