Angular ui-select placeholder not working

Question

We have been using ui-select (https://github.com/angular-ui/ui-select) to theme dropdowns like select2. This functionality has largely been working apart from one aspect: default placeholders.

The code largely follows the ui-select demos (3rd example on this page: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview).

As far as I'm concerned the default text should be that of the 'placeholder' attribute. Instead, it appears blank until you choose an option. We have been using a hack whereby we set the value of the ui-select-match, in the Angular controller to counter this issue, but this is far from perfect and clearly not how it should be used.

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

Has anyone ecountered this problem before, or have any idea as to what we are doing wrong?

Answer 1

I ran into this problem when I had something else in the controller bound to the ng-model, like producttype.selected. The other binding would initialize the model and make the ui-select directive behave as if a choice had already been made.

If that's your problem, the on-select callback is helpful for binding the ui-select to another object, and then using merging the data you want back onto the original object.