title: Change AngularJS input text value using javascript
body: <p>I'm trying to run javascript in a browser extension to automate a process of filling in a form on a website and then clicking a button -- the extension code can be simulated by typing javascript:code into the address bar.</p>
  
  <p>The website that I'm having problems with uses <code>angularJS</code>. I have the names of the input field ids and am using those to change the input field values. The fields fill up but when I click the button it says they are not filled, there are no values and they are all in error. Some validation is going on that does not "see" my changes unless I type in the values manually.</p>
  
  <p>Is there a simple way to change the value of the AngularJS input fields that have validation using just the id of the input field.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;input id="shippingAddr-first-name" type="text" class="first-name ng-pristine ng-valid" maxlength="16" data-ng-model="addressTypes[addressType].FirstName" focus-me="commonAddressTypeProps[addressType].focusOnFirstName" client-validation="onExit" data-required-on-exit=""&gt;
  </code></pre>
  
  <p>My attempts using
  <code>document.getElementById("shippingAddr-first-name").value="Dave";</code> change the field but do not register correctly during the form submission. It does work however if I type it in manually. I've also tried <code>click()</code>, <code>blur()</code>, and <code>focus()</code>, to simulate some things I might be doing manually but those do not work either.</p>