jquery之如何将 jQuery Select2 与 AngularJS 结合使用

我正在尝试将 jQuery (2.2.1) Select2 (3.5.2) 与 Angularjs (1.5) 一起使用，但很难从选择框中获取数据。我已经尝试过ui-select我可以检索数据...但搜索时浏览器经常崩溃，速度非常慢并且总体不稳定(5000-10000 项)。 jQuery Select2 快速且响应灵敏，即使有大量条目，但当我选择一个选项时，我似乎无法获取对象。

<head> 
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/Scripts/CustomScripts/app.js"></script> 
    <script src="~/Scripts/jquery-2.2.1.js"></script> 
    <script src="~/Scripts/select2.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $(".sel").select2(); 
        }); 
    </script> 
<head> 
<body ng-app="app" ng-controller="MainCtrl"> 
    <select class="sel" data-ng-model="country.selected" ng-options="country.Name for country in countries | orderBy: 'Name'"> 
<body> 

app.js

var app = angular.module('app', []); 
 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
 
    $scope.country = {}; 
 
    $scope.countries = [{ 
        name: 'Australia', 
    }, { 
        name: 'United States' 
    }, { 
        name: 'United Kingdom' 
    }]; 
 
}]); 

有没有办法让这两个很好地工作？

请您参考如下方法:

在搜索如何从 jQuery 访问 $scope 函数之后，我发现使用 angular.element.scope().function(x) 将允许我在“change”事件上传递每个 select2 元素的 key ，转换为 Angular ，然后可以对其进行操作。

<script type="text/javascript"> 
    $(document).ready(function () { 
        $(".sel").select2({ 
            placeholder: "Select a project..." 
        }) 
        .on("change", function (e) { angular.element(document.getElementById("MainCtrl")).scope().testfunction(); }); 
    }); 
</script>