JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="QuestionController">
    <ul ng-repeat="product in products">
        <li>
            <div>{{ product.selected | json }}</div>
             <select ng-model="product.selected" ng-options="color.name for color in product.color track by color.id"></select>
            </li>
    </ul>
</div>

JavaScript

function QuestionController($scope) {

    $scope.products = [
             {
                "name": "product1", 
                "value": "product1",
                "color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
                "selected": {name: 'Green', id: 11 }
             },
             {
                "name": "product2",
                "value": "product2",
                "color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
                "selected": {name: 'red', id: 10 }
             },
             {
                "name": "product3",
                "value": "product3",
                "color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
                "selected": {name: 'Blue',id: 12 }
            }
        ];    
}