JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="example">
<div ng-controller="ExampleController">
<p>Select something:
<select id="State" ng-model="selectedState" ng-change="stateChanged()" ng-options="option.Text as option.Text for option in model.Address.StateList track by option.Value"></select>
</p>
<p>Selected: {{selectedState}}</p>
<p>onChange: <span id="youShouldNeverDoThat"></span></p>
</div>
</div>
JavaScript
model = { Address: {} };
model.Address.StateList = [
{
Disabled: false,
Group: null,
Selected: false,
Text: "CA",
Value: "1"
},
{
Disabled: false,
Group: null,
Selected: false,
Text: "IL",
Value: "2"
},
{
Disabled: false,
Group: null,
Selected: false,
Text: "NJ",
Value: "3"
}
];
angular.module('example', [])
.controller('ExampleController', function ($scope) {
$scope.model = model;
$scope.selectedState = "CA";
$scope.stateChanged = function () {
// please don't ever do that.
document.querySelector('#youShouldNeverDoThat').textContent = $scope.selectedState;
};
});