This is my HTML:
<input id="selectedDueDate" type="text" ng-model="selectedDate" />
When I type into the box, the model is updated via the 2-way-binding mechanism. Sweet.
However when I do this via JQuery...
$('#selectedDueDate').val(dateText);
It doesn't update the model. Why?
You have to trigger the change event of the input element because ng-model listens to input events and the scope will be updated. However, the regular jQuery trigger didn't work for me. But here is what works like a charm
$("#myInput")[0].dispatchEvent(new Event("input", { bubbles: true })); //Works
Following didn't work
$("#myInput").trigger("change"); // Did't work for me
You can read more about creating and dispatching synthetic events.
Just use:
$('#selectedDueDate').val(dateText).trigger('input');
instead of:
$('#selectedDueDate').val(dateText);