AngularJs bind to select

Question

I'm using angular 1.5.2 and I'm trying to bind ,my select like this:

<label>Role</label>
<div class="form-group">
    <div>
        <select id="role" class="form-control" name="role" >
            <option value="1" ng-model="employeeCtrl.employee.RoleId" name="role" id="intern">Stagiair</option>
            <option value="3" ng-model="employeeCtrl.employee.RoleId" name="role" id="employee">Werknemer</option>
            <option value="4" ng-model="employeeCtrl.employee.RoleId" name="role" id="companyadmin">Bedrijfadmin</option>
        </select>
    </div>
</div>

But it's not working. When a user has role 4 it still shows 1 ?

Answer 1

you should use ng-model="employeeCtrl.employee.RoleId" in select tag instead of option tag

   <select id="role" class="form-control" ng-model="employeeCtrl.employee.RoleId" >
        <option value="1" name="role" id="intern">Stagiair</option>
        <option value="3" name="role" id="employee">Werknemer</option>
        <option value="4" name="role" id="companyadmin">Bedrijfadmin</option>
    </select>

See PLUNKER DEMO

Answer 2

Put the ngModel on the select element:

<select id="role" class="form-control" name="role" ng-model="employeeCtrl.employee.RoleId">
    <option value="1" name="role" id="intern">Stagiair</option>
    <option value="3" name="role" id="employee">Werknemer</option>
    <option value="4" name="role" id="companyadmin">Bedrijfadmin</option>
</select>