How to notify AngularJS that a form has been filled externally by jQuery?

Question

I have a page in AngularJS which has a form containing some fields. Upon loading that page, I want a bookmark which when clicked to fill the fields based on data in a configurat

Answer 1

The ng-model controller listens to the 'change' event.

To trigger it from jQuery:

$("#id").val("abcd").trigger("change");

This will set the value of the input and trigger the ngModelController to update the model in the AngularJS framework.

The DEMO

$(function() {
  $("#bt").on("click", function() {
    $("#id").val("abcd").trigger("change");
  });
})

    

    text={{$ctrl.text}}

    Click me

---

Note

It is important to load the jQuery library before the AngularJS library.

From the Docs:

To use jQuery, simply ensure it is loaded before the angular.js file.

For more information, see AngularJS angular.element API Reference.