Angular ng-model not updating when checkbox checked with jquery property

Question

The code is trying to set a checked property through jquery .prop function. But ng-model is still blank.

$('document').ready(function(){
    $("#mybutton").on('click',function(){
        $("#mycheckbox").prop('checked',true);
    });
});

<input type="button" id="mybutton" value="click">
<input type="checkbox" id="mycheckbox" name="one" ng-model="arr[1]" value="1" />

{{arr}}   -- is blank when checked with jquery and not blank when manually checked.

When i manually check the checkbox then ng-model is binded and its value is set. Can you please help how to update ng-model when checkbox is checked with jQuery.

Answer 1

You should read, when angular rechecks binded property like ng model and when digest runs .

Wrap your function with $scope.$applyAsync() method like this:

   $scope.$applyAsync($("#mycheckbox").prop('checked',true));

this should be done inside the controller.

If you want no do in scopeless path you can use $timeout.

And once more. All dom manipulation should be done inside directives/components where you can access variuos angular tools like applyAsync and others.

Answer 2

You can make directly model value to true. it will auto check the checkbox, no need to use jquery. you can use ng-click and call one function to controller which will change model value.