CODEWITHSUNDEEP
javascriptangularjs
jonnie
jonnie

Reputation: 12710

Why is my select ignoring my ng-model and ng-selected

I have a select box that will not select the option that is bound to ng-model or ng-select, instead it selects the hard coded value initially but when I select another it just overriders my selection with the last item in the list. I have stripped it down to it bare minimum and still cannot see

this is my 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>

and this is my script.js:

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 also Have a plnkr here This is frustrating me a lot because I have a lot of selects working fine and I cannot understand what is wrong with this particular one.

Help would be greatly appreciated

Upvotes: 0

Views: 321

Answers (1)

jnthnjns
jnthnjns

Reputation: 8925

You're not referencing the id correctly, it appears. Works fine for me after making that change.

Change:

freezeCalender.calendarID as freezeCalender.name

To: 

freezeCalender.id as freezeCalender.name

Upvotes: 2

Related Questions