Angular ng-model throwing a parse error on select input name

Question

I have a client supplied Saleforce form that has a generated name value on the state selector in the form. Angular is throwing a parse error when run.

I'm guessing it doesn't like the name, though I can't figure out how to get it to accept it.

I can't change the name property since it is tied to the client's Salesforce app.

Any suggestions? It's the "00N6100000GrRGn" that is causing the error.

<div class="form-group">
    <label for="00N6100000GrRGn">State <sup><span class="required">*</span</sup></label>
    <select id="00N6100000GrRGn" name="00N6100000GrRGn" title="State" class="form-control" ng-model="user.00N6100000GrRGn" ng-required="true">
        <option value="">Select your state</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
    </select>
    <p class="error validationerror" ng-show="myform.00N6100000GrRGn.$invalid && myform.00N6100000GrRGn.$touched">You must choose your state.</p>
</div>

Answer 1

Since user.00N6100000GrRGn is not a valid identifier for object property, you need to use bracket notation:

ng-model="user['00N6100000GrRGn']"

and

ng-show="myform['00N6100000GrRGn'].$invalid && myform['00N6100000GrRGn'].$touched"