AngularJS: select not binding to model

Question

I have a simple form that I wish to POST to my server. The bindings in AngularJS work except on my select. On my select I'm not getting a value:

Here is my markup:

...
<div id="divAccountName" class="isNotAvailable">
    <label for="inputAccountName">Account Name:</label>
    <input name="inputAccountName" required type="text" data-ng-model="register.accountName" data-ng-blur="checkAccountAvailability($event)" />
    <span></span>
</div>
<div class="account">
    <label for="inputAccountType">Account Type:</label>
    <select name="inputAccountType" data-ng-model="register.accountType" data-ng-options="a.Type for a in accountTypes.value" required>
        <option value="" data-ng-if="false"></option>
    </select>
    <span></span>
</div>
<div class="recaptcha">
    <div id="contact-recaptcha" class="g-recaptcha"></div>
</div>
<div>
    <input type="submit" value="Register" data-ng-click="registerUser(register)" />
</div>

The register object that gets passed to registerUser() has all my input values except the select value. So when I $resource.save() it to my webserver the value for register.accountType is null.

The account types are populating correctly from my controller, so they are selectable.

Answer 1

Hi Hope this plunker will help you

<select name="inputAccountType" data-ng-model="register.accountType" data-ng-options="a.name for a in accType track by a.type" required="">

Plunker