I've created a plunker for this:

Select choices are there, but when you choose one, the ui-select is left blank. Potentially important note: I'm using this inside a directive (ui-bootstrap). As a side note to this - in the plunker there is no wrapping directive so that is not the culprit.

<ui-select search-enabled="true" ng-change="updateMedu()" style="width: 100%" ng-model="medications.chosenMedications.metadata.conceptGroup.conceptProperties">
    <ui-select-match placeholder="Please click to choose or start typing dosage value..">{{$item}}</ui-select-match>
    <ui-select-choices repeat="cp in medications.chosenMedications.metadata[key].conceptGroup[1].conceptProperties | filter: $select.search">
        {{cp.synonym}}
    </ui-select-choices>
</ui-select>

Manual mock of the dataset:

$scope.medications.chosenMedications.metadata = [
    {
        conceptGroup: [
            {
                conceptProperties: [
                   {synonym: "Item One"},
                   {synonym: "Item Two"},
                   {synonym: "Item Three"}
                ]
            },
            {
                conceptProperties: [
                    {synonym: "Item A"},
                    {synonym: "Item B"},
                    {synonym: "Item C"}
                ]
            }
         ]
     }
];

I've created a plunker for this: http://plnkr.co/edit/5nk4BnYoO52En7P6kPu9

Select choices are there, but when you choose one, the ui-select is left blank. Potentially important note: I'm using this inside a directive (ui-bootstrap). As a side note to this - in the plunker there is no wrapping directive so that is not the culprit.

<ui-select search-enabled="true" ng-change="updateMedu()" style="width: 100%" ng-model="medications.chosenMedications.metadata.conceptGroup.conceptProperties">
    <ui-select-match placeholder="Please click to choose or start typing dosage value..">{{$item}}</ui-select-match>
    <ui-select-choices repeat="cp in medications.chosenMedications.metadata[key].conceptGroup[1].conceptProperties | filter: $select.search">
        {{cp.synonym}}
    </ui-select-choices>
</ui-select>

Manual mock of the dataset:

$scope.medications.chosenMedications.metadata = [
    {
        conceptGroup: [
            {
                conceptProperties: [
                   {synonym: "Item One"},
                   {synonym: "Item Two"},
                   {synonym: "Item Three"}
                ]
            },
            {
                conceptProperties: [
                    {synonym: "Item A"},
                    {synonym: "Item B"},
                    {synonym: "Item C"}
                ]
            }
         ]
     }
];

• javascript
• angularjs
• angularjs-directive
• angular-ui

1 Answer 1

Just try the following code:

<ui-select theme="select2" search-enabled="true" style="width: 100%" 
        ng-model="medications.chosenMedications.metadata.conceptGroup.conceptProperties">
    <ui-select-match placeholder="Click to select or start typing...">
        {{$select.selected.synonym}}
    </ui-select-match>
    <ui-select-choices repeat="cp in medications.chosenMedications.metadata[0].conceptGroup[1].conceptProperties | filter: $select.search">
            {{cp.synonym}}
    </ui-select-choices>
</ui-select>

Your problem is that you try to show {{$item}} instead of {{$select.selected.synonym}}

Hope, this will resolve your problem.

Working demo: http://plnkr.co/edit/B3HTozs0MniWBpEj8L50?p=preview