Angular -js：ng-model不适用于可搜索的下拉菜单

Question

I have implemented a searchable dropdown using this library ( https://select2.github.io/ ), its works fine but i can't get the ng-model value when the button is clicked.

 <select ng-model="destination_name" class="js-example-basic-single form-control" >
                         <option selected disabled>Choose</option>
                         <?php foreach ($all_dest as $value): ?>
                             <option value="<?=$value->id?>"><?=$value->destination_name?></option>
                          <?php endforeach; ?>
                     </select>
<input type="button" ng-click="addDest(destination_name)" value="{{btnTxt}}" name="add" class="btn btn-primary pull-right"/>

jquery for searchable dropdown

 $(document).ready(function() {
        $(".js-example-basic-single").select2();
    });

Angular js code

$scope.addDest=function (value) {
        alert(value);

}

here addDest is the function that passes the selected value in the dropdown menu when the button is clicked I will get undefined even if an item is selected.

NOTE

when i hide the jquery part it provides the searchable dropdown menu i will get the ng-model value. I think its the problem with jquery part.

Answer 1

Best solution - use https://github.com/angular-ui/ui-select instead of your select.

Next solution - write wrapper directive and sync scope with select via

$scope.$apply();

on select2 change event;