Angularjs: Ui-select ng-click in ui-select-choices

Question

I am trying to use an add button inside the options, but the problem is that ng-click fires but the option is not selected.

<ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;">
    <ui-select-match placeholder="...">
        <span ng-bind-html="$select.selected.name"></span>          
    </ui-select-match>
    <ui-select-choices repeat="service in data.base_services | filter: $select.search">
        <span ng-bind-html="service.name | highlight: $select.search"></span>

        <!-- HERE NOT -->
        <a href="" class="pull-right" ng-click="setnewservice()">
            <i class="glyphicon glyphicon-plus-sign"></i>
        </a>    
        <!-- ### -->

    </ui-select-choices>
</ui-select>                            


<!-- here obviously works -->
<a href="" class="pull-right" ng-click="setnewservice()">
    <i class="glyphicon glyphicon-plus-sign"></i>
</a>

I can send some parameter to the function and handle this case even selecting the clicked link of that item index so the model with take the correct value, or like in the above working sample take it outside...

but how can I properly handle this, stop the event, select the option without sending the object or some of its attributes, and then do the rest?

$scope.setnewservice = function ($event) {
    $event.stopPropagation();
    // ??
}

Answer 1

Use ng-change on the ui-select not ng-click on the ui-select-choices. Change this:

ng-click="setnewservice()

to:

ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;" ng-change="setnewservice()>