Question

Assume I have two objects: color and shirt.

Each shirt can have multiple properties as well as multiple colors which is basically an array of color objects.

function MyCntrl($scope) {
    $scope.colors = [
        {
            label:"Red",
            value:"r-e-d",
            available:true
        },
        {
            label:"Blue",
            value:"b-l-u-e",
            available:false
        }   
    ];

    $scope.shirts=[{
        size:"M",
        cost:100,
        colors:[ ]
    }
    ]
}

How can I use ng-options to append/remove color objects to/from shirts.color?

I want to associate scope.color objects to scope.shirts.color objects so that if I change something like name of the color or code of the color, then the corresponding items in the associated color objects in shirts.colors should also get updated automatically.

From what I know about ng-options and ng-model, I will have to create new objects for colors and set its values based on what is selected in the select box, but those objects will be independent of the color objects and changing the color objects will not update the corresponding objects in shirts.

Thank you in advance for your responses.

Answer 1

You can use ng-options for that directly:

Color: <select multiple ng:model="shirt.colors" ng:options="c.value as c.label for c in colors"></select>

Here is a Plunker: http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

update

And about editing of source colors: if in shirt’s color you store just value, it would be extremely hard to detect what was item was changed and re-select it in options (changed selected item unselects because AngularJS don’t know reason of change).

As workaround you can select objects, not values. I’ve updated plunker.