JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="Main">
    <p>{{greeting}}</p>
    
    <label>Select a Color:</label><br>
    <select multiple ng-model="selectedValues">
        <option value="1">Blue</option>
        <option value="2">Green</option>
        <option value="3">Yellow</option>
        <option value="4">Red</option>
    </select>
    <br>
    <tt> selectedValues = {{selectedValues}}</tt>
    
</div>

JavaScript

var fiddleApp = angular.module('fiddleApp', []);

fiddleApp.controller('Main', ['$scope', function($scope) {
    // is angular loaded and working?
    // (reduce future debugging)
    $scope.greeting = 'Hola!';
    
    $scope.selected = [
        {id:1, name:"Blue"},
        {id:4, name:"Red"}
    ];
    
    $scope.selectedValues = [];
    
    $scope.$watch('selected', function(nowSelected){
        $scope.selectedValues = [];
        
        if( ! nowSelected ){
            // here we've initialized selected already
            // but sometimes that's not the case
            // then we get null or undefined
            return;
        }
        angular.forEach(nowSelected, function(val){
            $scope.selectedValues.push( val.id.toString() );
        });
    });
    
}]);


// http://docs.angularjs.org/guide/bootstrap Manual Initialization
angular.bootstrap(document, ['fiddleApp']);