Angularjs: Ui-select ng-click in u-select-choice

Question

I am trying to use the add button inside the parameters, but the problem is that ng-click starts, 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 function parameter and handle this case, even choosing a click link of this element index so that the model takes the correct value, or as in the above working sample, take it out ...

but how can I handle this correctly, stop the event, select a parameter 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 element not the ng-click selectable ui-select. Change this:

 ng-click="setnewservice() 

in

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

Answer 2

You can add the on-select attribute to your tag as follows:

 on-select="setnewservice($item, $model)"