Bind ng-model name to chosen

I can’t figure out why I’m not able to bind an object to ng-model in choosen directive

Heres my HTMl content code:

 <select class="form-control" required
                        multiple
                        ng-model="selectedItems"
                        ng-options="r.id as r.name for r in availableItems"
                        chosen>
                </select>

The JSON:

$scope.selectedItems= [
        {
            "id": 1,
            "name": "Selected 1",
            "description": "Nulla adi architecto et",

        },
        {
            "id": 2,
            "name": "Selected 2",
            "description": "test",

        }
    ]

$scope.availableItems= [
        {
            "id": 1,
            "name": "Available 1",
            "description": "Nulla adi architecto et",

        },
        {
            "id": 2,
            "name": "Available 2",
            "description": "test",

        }
    ]

However I’m able to display the available items in the select drop down but my requirement: To display the selected items by default in the input box of choosen.

Reference:Localytics-Angular Choosen

Answer

Angular will automatically select the items by comparing them with the value of ng-model. In your case, the selected item is r.id, which is a primitive, so the equality will be based on comparing r.ids:

$scope.selectedItems = [1, 2];

Plunker