ui-select as directive

//Example 1:
<ui-select  ng-model="eventRow[prStDe.dataElement.id]"
                                                    theme="select2"
                                                    ng-dblclick="$event.stopPropagation();"
                                                    title="{{prStDe.dataElement.formName ? prStDe.dataElement.formName : prStDe.dataElement.displayName}}"
                                                    ng-required={{prStDe.compulsory}}
                                                    ng-disabled="selectedOrgUnit.closedStatus || selectedEnrollment.status !== 'ACTIVE' || eventRow.editingNotAllowed || assignedFields[eventRow.event][prStDe.dataElement.id] "
                                                    name="{{eventRow.event}}{{prStDe.dataElement.id}}"
                                                    on-select="saveDatavalue(prStDe, $eval('eventRowForm' + eventRow.event + '.' + eventRow.event + prStDe.dataElement.id))"
                                                    style="width:100%;">
                                            <ui-select-match allow-clear="true" ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)' class="form-control-ui-select"  placeholder="{{'select_or_search' | translate}}">{{$select.selected.displayName  || $select.selected}}</ui-select-match>
                                            <ui-select-choices  repeat="option.displayName as option in optionSets[prStDe.dataElement.optionSet.id].options | filter: $select.search | limitTo:maxOptionSize">
                                              <span ng-bind-html="option.displayName | highlight: $select.search"></span>
                                            </ui-select-choices>
                                        </ui-select>

//Example 2:
<ui-select  ng-model="selectedTei[attribute.id]"
                                    theme="select2"
                                    ng-required="attribute.mandatory"
                                    name="foo"
                                    d2-attribute-validator
                                    attribute-data={{attribute}}
                                    selected-program-id={{selectedProgram.id}}
                                    selected-tei-id={{selectedTei.trackedEntityInstance}}
                                    ng-disabled="selectedOrgUnit.closedStatus || isDisabled(attribute)"
                                    on-select="teiValueUpdated(selectedTei, attribute.id)"
                                    class="ui-select-style">
                            <ui-select-match allow-clear="true"  class="form-control-ui-select"  placeholder="{{'select_or_search' | translate}}">{{$select.selected.displayName  || $select.selected}}</ui-select-match>
                            <ui-select-choices  repeat="option.displayName as option in optionSets[attributesById[attribute.id].optionSet.id].options | filter: $select.search | limitTo:maxOptionSize">
                              <span ng-bind-html="option.displayName | highlight: $select.search"></span>
                            </ui-select-choices>
                        </ui-select>

//Example 3:
<ui-select ng-model="model.selectedProgram"
                        theme="select2"
                        on-select="getProgramAttributes(model.selectedProgram)"
                        style="width:100%;">
                    <ui-select-match allow-clear="true" class="form-control-ui-select" placeholder="{{'select_or_search' | translate}}">{{$select.selected.displayName  || $select.selected}}</ui-select-match>
                    <ui-select-choices  repeat="program in programs | filter: $select.search | limitTo:maxOptionSize">
                        <span ng-bind-html="program.displayName | highlight: $select.search"></span>
                    </ui-select-choices>
                </ui-select>