Binding scope values to ui-select-match attributes in angular's ui-select

Question

I'm using AngularUI's UI-Select to create rich selects in my application, and I'm trying to bind the allow-clear attribute to a function or property on the scope:

<ui-select ng-model="$parent.model" theme="bootstrap">
    <ui-select-match placeholder="..." allow-clear="$parent.allowClear">{{$select.selected.DisplayText}}</ui-select-match>
    <ui-select-choices repeat="opt.ID as opt in operators">
        {{opt.DisplayText}}
    </ui-select-choices>
</ui-select>

But no matter what I try, couldn't get it to work. Then I found the following code on UI-Select source code, under uiSelectMatch directive definition:

    $select.allowClear = (angular.isDefined(attrs.allowClear)) ? (attrs.allowClear === '') ? true : (attrs.allowClear.toLowerCase() === 'true') : false;

that could mean it's doing a string comparison for the attribute value.

Is there any way that I can work around this and bind the attribute (even a one-time binding during the initialization)?

Answer 1

If I got you right, you could just wrap your value in {{...}} to make it work, like this:

<ui-select-match placeholder="..." allow-clear="{{!!$parent.allowClear}}">{{$select.selected.DisplayText}}</ui-select-match>

See little Demo.