How to make angular mask work with various credit cards?
<p>I'm using AngularUI Mask (<a href="https://github.com/angular-ui/ui-mask" rel="nofollow">https://github.com/angular-ui/ui-mask</a>) on a credit card field.</p>

<p><code>&lt;input
    type="text"
    placeholder="xxxx-xxxx-xxxx-xxxx"
    ui-mask="9999-9999-9999-9999"
    ng-model="card.number"&gt;
</code></p>

<p>But, according to Stripe (<a href="https://stripe.com/docs/testing" rel="nofollow">https://stripe.com/docs/testing</a>) not all cards have 16 digits. How can I allow users to input from 14 to 16 digits and automatically format it as:</p>

<ul>
<li>xxxx-xxxxxx-xxxxx for American Express</li>
<li>xxxx-xxxx-xxxx-xx for Diners Club</li>
<li>xxxx-xxxx-xxxx-xxxx for everything else</li>
</ul>

<p>Plnkr:
<a href="http://plnkr.co/edit/Qx9lv7t4jGDwtj8bvQSv?p=preview" rel="nofollow">http://plnkr.co/edit/Qx9lv7t4jGDwtj8bvQSv?p=preview</a></p>