AngularJS выбор поле со списком не обновляется модель

Question

Я получаю массив по AJAX, которая выглядит как этот

$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] 

Таким образом, массив JSON, с каждой записью, имеющей event_id и title.

Я хочу, чтобы отобразить выпадающее поле со списком с каждым из названий, и сохранить выбранный event_id пользователя в $scope.selectedEventId

Мой HTML является

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

Я инициализировать модель, когда я получаю данные в формате JSON, с

   if (! $scope.eventNameData) 
        return; 

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

и ручка выбора меняется с

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

но, когда я оставил точку, значение модели $scope.analyticEvent никогда не изменяется.

ОДНАКО, когда я добавить analyticEvent == {{analyticEvent}} в мой HTML, перед полем со списком, что является обновляется при выборе из выпадающего списка.

Что я делаю неправильно? Как получить значение event_id выбранного объекта в $scope.selectedEventId?

---

[Update] Googling, я вижу несколько замечаний о child scope - могло быть это?

---

[Update ++] Я думаю, что я должен подчеркнуть более, что если дисплей {{selectedEventId}} в моем HTML, то он становится обновляется правильно - даже если он не обновляется в ng-change функции - как это может быть?

Answer 1

Aha! Это проблема с детским прицелом.

Изменение HTML для

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

и код intialzation в

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

на старте контроллера, и делать это, когда JSON получен

   if (! $scope.eventNameData) 
        return; 

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

и код ng-change будет

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

и мы видим правильное значение в этой функции:

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

Quod demomstrandum :-) и требовалось

Answer 2

Он хорошо работает с этим кодом,

<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