JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<div ng-controller="MyController" ng-app>
    <select class="form-control" ng-model="mySelection.colorId" ng-options="color.id as color.name for color in colorList" ng-change="showChange()">
        <option value="">--Select a Color--</option>
    </select>
    <input type="button" value="submit" ng-click="Select()"></input>
</div>

CSS

div {
    margin-bottom: 2em;
}

JavaScript

function MyController($scope) {
    $scope.colorList = [{
        id: '1',
        name: 'red'
    }, {
        id: '2',
        name: 'blue'
    }, {
        id: '3',
        name: 'green'
    }];

    var colorId = 3;
    $scope.mySelection = {
        colorId : colorId
    } ;
    $scope.showChange = function(){
        alert($scope.mySelection.colorId);
    }
    alert($scope.mySelection.colorId);

    $scope.Select = function () {
        console.log('select fired');
        var colorId = 1;
        $scope.mySelection.colorId = colorId + "";
    }
}