JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="" ng-controller="MyCtrl">
    <label>Array using ng-multiple:</label>
    <select ng-model="model"
    ng-required="mandatory" ng-options="value.id as value.label group by value.group for value in valrep" ng-multiple="true">
        <option value="">-- Select a number --</option>
    </select>
    <br />
    <label>Objects using ng-multiple:</label>
    <select ng-multiple="true" ng-model="model2"
    ng-required="mandatory" ng-options="k as v for (k, v) in valrep2">
        <option value="">-- Select a colour --</option>
    </select>
    <br />
    <label>Array Using multiple (not ng-multiple):</label>
    <select multiple ng-model="model3"
    ng-required="mandatory" ng-options="value.id as value.label group by value.group for value in valrep">
        <option value="">-- Select a number --</option>
    </select>
    <br />
    <label>Objects Using multiple (not ng-multiple):</label>
    <select multiple ng-model="model4"
    ng-required="mandatory" ng-options="k as v for (k, v) in valrep2">
        <option value="">-- Select a colour --</option>
    </select>
</div>

CSS

select {
    width:220px;
    border:1px solid #CCCCCC;
    background-color:#FFFFFF;
    border-radius: 4px 4px 4px 4px;
}

JavaScript

function MyCtrl($scope) {
    $scope.valrep = [{
        "id": "1",
            "label": "One"
    }, {
        "id": "2",
            "label": "Two"
    }, {
        "id": "3",
            "label": "Three"
    }, {
        "id": "4",
            "label": "Four"
    }, {
        "id": "5",
            "label": "Five"
    }, {
        "id": "6",
            "label": "Six"
    }];
    $scope.valrep2 = {
        b: 'black',
        w: 'white',
        r: 'red',
        c: 'cyan',
        y: 'yellow'
    };
    $scope.mandatory = true;
}