Update jQuery Chosen selected values with Angular

Question

I am trying to pre-select multiple objects into jQuery Chosen control using Angular. See my Plunkr here: http://plnkr.co/FNlTAcILnoeyjZat1tH1

The data is set to the model in my controller like so:

 $scope.valueTypes = [
     { code: 'V1', name: 'Value 1', description: 'Description 1' },
     { code: 'V3', name: 'Value 3', description: 'Description 3' }
 ];

My chosen wrapper directive looks like so:

.directive('myChosen', ['$log', function ($log) {
    return {
        link: function (scope, element, attrs) {
            var model = attrs.ngModel;
            if (model !== null) {
                scope.$watch(model, function (data) {
                    $log.info('Model updated: ' + angular.toJson(data));
                    element.trigger('chosen:updated');
                });
            }

            element.chosen();
        },
        require: 'ngModel',
        restrict: 'A'
    };
}])

and used as follows:

<select id="valueType" name="valueType" class="form-control chosen-select" ng-options="valueType as valueType.code + ' - ' + valueType.name for valueType in getValueTypes()" ng-model="valueTypes" multiple="" my-chosen ng-required="true">

with getValueTypes() returning a list of objects:

$scope.getValueTypes = function () {
    var valueTypes = [];
    for (var i = 0; i < 5; i ++) {
        valueTypes.push({
           code: 'V' + i,
           name: 'Value ' + i,
           description: 'Description ' + i
        });
    }
    return valueTypes;
};

However, nothing gets pre-selected. If I switch to a list of strings for my select list and for pre-selected values, the values get pre-selected correctly.

So, how can I make pre-selection work?

Thanks!

Answer 1

The problem is that Angular is using object reference equality to decide if an option is selected.

Off the top of my head, I can think of two possible solutions:

1. Use some sort of identifier instead of the entire object as the value for the select
2. Make sure you use the actual object instead of another object that happens to have the exact same properties

For #1, change you ng-options attribute to look like this:

valueType.code as valueType.code + ' - ' + valueType.name for valueType in getValueTypes()

(notice the valueType.code at the beginning instead of only valueType)

For #2, you in this instance you would need to change your initialization code, but I suspect that in a "real" application you may need to change the way that you populate values:

$scope.valueTypes = [];
// ...
$scope.getValueTypes = function () {
    var valueTypes = [];
    for (var i = 0; i < 5; i ++) {
        var obj = {
           code: 'V' + i,
           name: 'Value ' + i,
           description: 'Description ' + i
        };
        valueTypes.push(obj);
        if (i == 1 || i == 3) { // or whatever
            $scope.valueTypes.push(obj); // now it's the same object
        }
    }
    return valueTypes;
};

Answer 2

quote from angular select documentation

ngModel compares by reference, not value

your ng-model is referencing to $scope.valueTypes, but your ng-repeat to the result from your function $scope.getValueTypes. for a more detailed explenation have a look at this fiddle (it is from the angular docs too, not my work =) )

hope i could help a bit, good luck!