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

Question

我已经使用这个库 (https://select2.github.io/) 实现了一个可搜索的下拉菜单，它工作正常，但单击按钮时我无法获得 ng-model 值。

 <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 搜索下拉菜单

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

Angular js 代码

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

}

这里addDest是当按钮被点击时传递下拉菜单中选择的值的函数 即使选择了一个项目，我也会得到undefined。

注意

当我隐藏jquery 部分时，它提供了可搜索的下拉菜单，我将获得ng-model 值。 我认为这是 jquery 部分的问题。

Answer 1

最佳解决方案 - 使用 https://github.com/angular-ui/ui-select 而不是您的选择。

下一个解决方案 - 编写包装器指令并使用 select via 同步范围

$scope.$apply();

在 select2 更改事件上；