AngularJsのui-select-match要素の最終HTML要素にクラスを適用するにはどうすればよいですか？

Question

私は、角-jsからUI-選択ブートストラップの例でこれを得ることはありません：
編集：直接plunkerにリンクするので、このページに第五（ブートストラップ）の例を使用することはできません。http://angular-ui.github.io/ui-select/

しかし、私のコードでは、選択値を持つラベルの幅は100％です。デフォルトのUI選択クラスからプロパティは、パディングは上書きされます。

.ui-select-bootstrap .ui-select-match-text { 
    width: 100%; 
    padding-right: 1em; 
} 

これは、ラベルは、リストボックスの上に流れるように発生します

私は幅のwidthプロパティをオーバーライドすることで、この効果を取り消すことができます。自動;
要素のhtmlを直接編集してクラスを適用できます。しかし、クラスがソースHTMLに追加されると、結果のHTMLにクラスが見つかりません。
そこでクラスをどのように適用できますか？

これは私のソースコードです：

<label class="control-label">Bronhouder</label> 
<ui-select ng-model="params.bronhouder" theme="bootstrap" on-select="selectBronhouder()"> 
    <ui-select-match ng-class="{'listboxSelectedLabelOverflowFix': true}">{{params.bronhouder.naam}}</ui-select-match> 
    <ui-select-choices repeat="item in bronhouders | filter: $select.search"> 
     <span ng-bind-html="item.naam | highlight: $select.search"></span> 
    </ui-select-choices> 
</ui-select> 

私は、UI選択-match要素に、クラスlistboxSelectedLabelOverflowFixを追加しようとしたが、それが最終的なHTML要素に表示されません。
このクラスの効果は、ng-class（ソースコードの編集）を使用して達成できます。

4angular.js:14328 Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 35 of the expression [{"selectedLabelOverflowFix":true} {'btn-default-focus':$select.focus}] starting at [{'btn-default-focus':$select.focus}]. http://errors.angularjs.org/1.6.1/ $parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=35&p3=%7BelectedLabelOverflowFix%22%3Atrue%7D%20%7B'btn-default-focus'%3A%select.focus%7D&p4=%7B'btn-default-focus'%3A%select.focus%7D

をだから、すでに角度によって生成されたのHTML要素上の別のngのクラスがあります次のようになります。しかし、それは次のようなエラーとアンギュラ内部で競合が発生します。 ng-classは単一の{}ブロックを必要とし、私のものと組み合わせることはできません。

Answer 1

私は、ui-selectが使用するクラスをテキスト要素に適用することでこれを解決しました。

.ui-select-match-text { 
    width: auto !important; 
}