Angular: ng-options, replacing both the array and model value when updating

Question

I am working on a model that for each property update is sent to the server and receives a recount. Since most properties are list-based, I use <select>/ dropdown extensively .

Logic setup example:

{
  NumberList: ['123', '456', '789']
  Number: 0
}

User selects “ 123 ” from NumberList, server responds

{
  NumberList: ['123', '456', '789']
  Number: 123,
  OtherNumberList: ['999', '888', '777'],
  OtherNumber: 0
}

My problem is that as soon as the user selects 123, he does not “stick” to the view. The selection lists “blink” (in the absence of a better description) and return to option 0 / Empty. In the model, however, the property is correctly reflected.

, SO, ng-repeat. , .

<select class="form-control" ng-model="model.Number" ng-change="mCtrl.updateModel(index)">
    <option ng-repeat="Number in model.NumberList" value="{{Number}}" ng-selected="model.Number == Number">{{Number}}</option>
</select>

. , , .

<select class="form-control" ng-options="val for val in NumberList" ng-model="model.Number"></select>

, track by, .

, . , , , , , , . , ngOptions .?

. . update . ngChange .

'update': function (index, model) {
    $window.logger('Server called update ::');
    // The array below is a list of all models
    MyService.listOfModels[index] = model;
    // Yes, this is a bit quick'n'dirty ...
    $rootScope.$apply();
}

Answer 1

, :

, , , - , , , . , ngOptions .?

... ngOptions === . , , .

, , , , , .

angular.extend - :

'update': function (index, model) {
...
     angular.extend(MyService.listOfModels[index], model );
...
}

Answer 2

, , . : http://jsfiddle.net/vittore/uxu3L/

,

,

var app = window.app = angular.module('app', [])

app.controller('Ctrl',['$scope','$timeout', function ($scope, $timeout) {
    this.model = {       
      NumberList: ['123', '456', '789'],
      Number: 123
    }

    this.postBack = function() {        
        $timeout(function() {
            this.model = {
              NumberList: ['123', '456', '789'],
              Number: 123,
              OtherNumberList: ['999', '888', '777'],
              OtherNumber: 0
            }               
        }.bind(this))       
    }.bind(this)   
}])

app.controller('Ctrl2',['$scope','$timeout', function ($scope, $timeout) {
    this.model = {      
      NumberList: ['123', '456', '789'],
      Number: 123
    }

    this.postBack = function() {        
        $timeout(function() {
            this.model.OtherNumberList=['999', '888', '777']
            this.model.OtherNumber= 0         
        }.bind(this))        
    }.bind(this)    
}])