AngularJS combo box selection is not updating model

Question

I am getting an array by AJAX, which looks like this

$scope.eventNameData
Array[2]
    0: Object event_id: "1"title: "Event one" __proto__: Object
    1: Object event_id: "2"title: "Event two" __proto__: Objectlength:     
2__proto__: Array[0]

So, an array of JSON, with each entry having an event_id and a title.

I want to display a drop down combo box with each of the titles, and store the user selected event_id in $scope.selectedEventId

My HTML is

  <select ng-model="analyticEvent" ng-options="x.title for x in eventNameData"
          ng-change="SelectedAnalyticEventChanged()">
  </select>

I initialize the model, when I receive the JSON data, with

                if (! $scope.eventNameData)
                    return;

                if ($scope.selectedEventId == -1)
                {
                    $scope.selectedEventId = $scope.eventNameData[0]['event_id'];
                    $scope.analyticEvent = $scope.eventNameData[0];
                }

and handle the selection changing with

$scope.SelectedAnalyticEventChanged = function()
{
    $scope.selectedEventId = $scope.analyticEvent.event_id;
}

but, when I breakpoint that, the value of the model, $scope.analyticEvent never changes.

HOWEVER, when I add analyticEvent == {{analyticEvent}} to my HTML, just before the combo box, that is updated when I select from the combo box.

What am I doing wrongly? How do I get the value of the event_id of the selected object into $scope.selectedEventId?

[Update] Googling, I see some remarks about child scope - could that be it?

[Update++] I think I should stress more that if display {{selectedEventId}} in my HTML, then it is getting updated correctly - even though it doesn't get updated in the ng-change function - how can that be?

Just a wild guess, but this could be related with the fact that you are not using a dot in `ng-model`, please see, for example, [here](http://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong). Anyways, I could not reproduce the problem. Could you add a Plunker/JSFiddle? — masa, Nov 06 '16 at 15:32

score 0 · Answer 1 · answered Nov 06 '16 at 14:57

0

It works well with this code,

  <div id="main">
      <label for="reason">Event</label>
      <select class="form-control" ng-change="SelectedAnalyticEventChanged()"   ng-model="analyticEvent" ng-options="event as event.title for event in eventNameData"></select>
    </div>

DEMO

answered Nov 06 '16 at 14:57

Sajeetharan

216,225
63
350
396

What did you change? I see it working in your Plunk, but even when I change `x.title for x in eventNameData` to `event as event.title for event in eventNameData`, I still have the problem. I can't see what else you changed – Mawg says reinstate Monica Nov 06 '16 at 15:24

Mawg says reinstate Monica · Accepted Answer · 2016-11-08T18:31:01.477

Aha! It was a child scope problem.

Change the html to

<select ng-model="analyticEvent.data" ng-options="event as event.title 
        for event in eventNameData"   ng-change="SelectedAnalyticEventChanged()">
</select>

and the intialzation code to

$scope.analyticEventDummyData = {"event_id" : -1,
                                 "title" : ''};
$scope.analyticEvent = {"data" : $scope.analyticEventDummyData};

at the start of the controller, and do this when the JSON is received

                if (! $scope.eventNameData)
                    return;

                if ($scope.selectedEventId == -1)
                {
                    $scope.selectedEventId = $scope.eventNameData[0]['event_id'];
                    $scope.analyticEvent.data = $scope.eventNameData[0];
                }

and the ng-change code becomes

$scope.SelectedAnalyticEventChanged = function()
{
    $scope.selectedEventId = $scope.analyticEvent.data.event_id;
}

and we see the correct value in that function:

$scope.analyticEvent.data
"object:39"  
    event_id: "2"
    title: "Event two"
   __proto__: Object

Quod erat demomstrandum :-)

AngularJS combo box selection is not updating model

2 Answers2