Label for ng-repeat in AngularJS

Question

The code snippet below shows what I'm trying to achieve. I'm basically assigning a label to the options in the select. The class on the label ie label-multi applies some styling to the options as well. While this works fine for static options, when I try to use the ng-repeat loop, my options are displayed as {{item.name}} instead of the actual name of the item.

{{item.name}} is definitely available and works perfectly without the label. But applying this class label-multi seems to be interfering somehow. What could the problem here be?

<div class="row">

    <div class="col-sm-2">
        <label class="label-multi" for="items">Items:</label>
    </div>

    <div class="col-sm-10">
        <select multiple data-placeholder="Select Items..." id="items">
        <option ng-repeat="item in items">{{item.name}}</option>
        </select>
    </div>

</div>

Answer 1

To bind to a select you need to use different syntax:

<select multiple id="items" ng-options="item.name for item in items" ng-model="selectedItem">

</select>

ng-repeat is only used to repeat data. ng-options is built for this specific data binding purpose

See docs: https://docs.angularjs.org/api/ng/directive/select