1

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.

Pratik M
  • 39
  • 1
  • 1
  • 8
  • Have you tried using `ng-checked="arr[1]"` instead? Is `arr` in your scope? – A. Gille Oct 31 '16 at 14:19
  • Duplicated question: http://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery – Gabriel Oct 31 '16 at 14:20
  • @A.Gille Yes, the model gets set when i manually set it. but when it is triggered though a button click then it does not get set. i.e when checkbox is checked through a button click – Pratik M Oct 31 '16 at 14:21
  • Like Gabe's post above, can you try triggering the input event. I doubt what you are doing will work, unless you have some Angular way in it. – Mahesh Oct 31 '16 at 14:24

1 Answers1

0

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.

Drag13
  • 5,859
  • 1
  • 18
  • 42