Having an issue with a select box that is not selecting the option bound to ng-model or ng-select. Instead, it initially selects the hard coded value but then overrides my selection with the last item in the list. Even after stripping it down to its bare minimum, I am unable to find a solution.
This is the HTML page:
<!doctype html>
<html lang="en>
<head></head>
<body>
<div ng-app="myapp">
<div ng-controller="myController">
<select ng-model="freezeCalendar_model" ng-options="freezeCalender.calendarID as freezeCalender.name for freezeCalender in freezeCalendarList"></select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js></script>
<script src="script.js></script>
</body>
</html>
This is the script.js file:
var app = angular.module("myapp", ["controllers"]);
var controllers = angular.module("controllers", []);
controllers.controller('myController', function ($scope) {
$scope.freezeCalendar_model = 162;
$scope.freezeCalendarList = [{
"id": 104,
"name": "ABC"
}, {
"id": 202,
"name": "123"
}, {
"id": 121,
"name": "xyz"
}, {
"id": 224,
"name": "hello"
}, {
"id": 162,
"name": "bam"
}, {
"id": 164,
"name": "boom"
}];
});
I've also created a plnkr here. This particular issue is puzzling me as I have other selects working perfectly fine and cannot figure out what's wrong with this one.
Any help or advice would be greatly appreciated.