JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="fooCtrl as fCtrl">
    
    <label>
        {{ fCtrl.selectedItem.Value + ' :: ' + fCtrl.selectedItem.Group }}
    </label>
    
    <select 
        ng-model="fCtrl.selectedItem" 
        ng-options="item.Value group by item.Group for item in fCtrl.items">
    </select>
    
    <select 
        ng-model="fCtrl.selectedItem" 
        ng-options="{{ fCtrl.optionsString }}">
    </select>
    
    
    
</div>

CSS

body { padding: 20px; }
label { display: block; }
select { display: block; margin: 10px; width: 200px; }

JavaScript

angular.module('fooApp',[])

.constant('fooVals', {
    items: [
        { Id: 1, Value: 'Orange', Group: 'Fruit' },
        { Id: 2, Value: 'Lemon', Group: 'Fruit' },
        { Id: 3, Value: 'Lime', Group: 'Fruit' },
        { Id: 4, Value: 'Tomato', Group: 'Fruit' },
        { Id: 5, Value: 'Eggplant', Group: 'Vegetable' },
        { Id: 6, Value: 'Squash', Group: 'Vegetable' },
        { Id: 7, Value: 'Tomato', Group: 'Vegetable' },
    ]
})

.controller('fooCtrl', function MyCtrl($scope, fooVals) {
    this.selectedItem = null;
    this.items = fooVals.items;
        
    this.optionsString = 'item.Value group by item.Group for item in fCtrl.items';
})