Угловая двусторонняя привязка к ui-select2

Question

Простая проблема, возможно, обсуждаемая много раз, но я не могу найти правильное решение по этой простой проблеме.

Проблема:
Изменения в выбранных элементах не влияют на представление (что должно).

Контроллер:

var myApp = angular.module('myApp', ['ui.select2']); 

function MyCtrl($scope) { 
    $scope.selectedDaltons = [4]; // Averell is preselected (id:4) 
    $scope.daltons = [ 
     { id: 1, name: 'Joe' }, 
     { id: 2, name: 'William' }, 
     { id: 3, name: 'Jack' }, 
     { id: 4, name: 'Averell' }, 
     { id: 5, name: 'Ma' } 
    ]; 
    $scope.changeAverellsName = function() { 
     // Fiddle's issue!! 
     // observe, that the selected item on the view does not change!! 
     $scope.daltons[3].name = "Idiot"; 
    }; 
}; 

Вид:

<div ng-controller="MyCtrl"> 

    <!-- changing model via click --> 
    <button ng-click="changeAverellsName()">change Averell's name to 'Idiot'</button> 

    <!-- selected items are not binded to the model --> 
    <select multiple ui-select2 class="form-control" id="70.1.6.3" data-ng-model="selectedDaltons"> 
     <option data-ng-repeat="dalton in daltons" value="{{dalton.id}}" text="">{{dalton.name}}</option> 
    </select> 

    <!-- this list is for assure, that two way binding works --> 
    <ul> 
     <li data-ng-repeat="dalton in daltons">{{dalton.name}}</li> 
    </ul> 
</div> 

Here as jsfiddle

Как я могу сделать двухстороннюю связывающую работу?

Answer 1

От исходного кода here в строке 134, где просматривается коллекция источников, она смотрит только на изменение коллекции (элементы удалены или добавлены), а не значения свойств элемента для изменения. Для того, чтобы следить за изменениями пункт собственности, а также, часы должны быть закодированы как:

scope.$watch(watch, function (newVal, oldVal, scope) { 
    if (angular.equals(newVal, oldVal)) { 
    return; 
    } 
    // Delayed so that the options have time to be rendered 
    $timeout(function() { 
    elm.select2('val', controller.$viewValue); 
    // Refresh angular to remove the superfluous option 
    controller.$render(); 
    if(newVal && !oldVal && controller.$setPristine) { 
     controller.$setPristine(true); 
    } 
    }); 
}, true); 

Обратите внимание на «истинный» в конце функции часов. Чтобы обойти это, вам нужно будет использовать карту, чтобы скопировать исходную коллекцию обратно в себя.