title: Ng-model and iOS credit card scanning
body: <p>Ng-model and iOS credit card scanning</p>
  
  <p>I have a credit card form.  Each field looks something like this:</p>
  
  <pre><code>&lt;input type=“text” ng-model = “cc.number”, ng-class = validClass('cc.number’)&gt;
  </code></pre>
  
  <p>The <code>validClass</code> function returns <code>valid</code> or <code>invalid</code>, and it used for as-you-type validation.  It all works great- if you type a credit card that’s too long, or doesn’t pass Luhn validation, it lights up red.</p>
  
  <p>When you hit ‘submit’, the code does credit card stuff with the values of <code>cc.number</code>, <code>cc.securityCode</code>, <code>cc.month</code>, and <code>cc.year</code>.</p>
  
  <p>The problem comes when you use iOS’s <a href="http://www.cnet.com/how-to/scan-your-credit-card-instead-of-keying-in-number-for-purchases-in-ios-8/" rel="nofollow">credit card scanner</a>.  It’s a feature that, when you click on a credit card field on a website, lets you use your phone’s camera to scan your credit card.  It then parses that photo and puts the credit card number + expiration date into the form.  It’s pretty cool.</p>
  
  <p>However, when iOS safari does this, it doesn’t seem to trigger ng-model to update.  The <code>validClass</code> function output doesn’t change based on the new input.  Worse yet, when the user submits the form, the updated value of <code>cc-number</code> doesn’t appear to have changed.</p>
  
  <p>It’s frustratingly hard to debug this issue since this scanning feature isn’t available on the iOS simulator.  It’s also not available on a real iPhone when I point it to a local network address (e.g., my laptop).  It <em>appears</em> to only show up as an option on https sites, which makes it really hard to debug.</p>
  
  <p>TLDR: iOS Safari’s “scan credit card” feature doesn’t update ng-model variables.  Does anyone have a good way to fix or work around this?</p>