Javascript 使用带有Angularjs和ajax值的ui select

我正在尝试从Select2V4切换到angularjs包装器。 我通过ajax调用填充值：

$http({
        method: 'GET',
        url: 'roles'
    }).then(function successCallback(response) {
        $scope.roles = response.data.result;
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

我想使用select2主题显示角色名称，并将其保存到我的表单变量role id中。使用select2时，我使用以下代码：

<select class="form-control select2"
    style="width: 100%;" name="role" data-ng-model="newUser.role"
    data-ng-options="role.idRole as role.role for role in roles track by role.role"
    required>
</select>

<ui-select theme="bootstrap" style="width: 100%;"
    data-ng-model="newUser.role" required> 
    <ui-select-match placeholder="Select role">
       {{$select.selected.role}}
    </ui-select-match> 
    <ui-select-choices
       repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
       <span data-ng-bind="role.role"></span>
    </ui-select-choices>
</ui-select>

但它不支持占位符、默认值和允许清除。因此，我使用ui选择设置：

<ui-select style="width: 100%;" theme="select2" data-ng-model="newUser.role"> 
    <ui-select-match placeholder="Select role"> <span data-ng-bind="role.role"></span> </ui-select-match> <ui-select-choices
        repeat="role in (roles | filter: $select.search) track by role.role">
    <span data-ng-bind="role.role"></span> </ui-select-choices> 
</ui-select>

但它不起作用，我只看到空的select，没有找到元素。但奇怪的是，在引导主题中，如果我看不到我选择的女巫，我也能看到它的值。 你能帮我吗

更新

---

使用select2 v3.4.5（我使用的是4），它与引导主题有相同的问题。

我切换到引导，并使用以下代码：

<select class="form-control select2"
    style="width: 100%;" name="role" data-ng-model="newUser.role"
    data-ng-options="role.idRole as role.role for role in roles track by role.role"
    required>
</select>

<ui-select theme="bootstrap" style="width: 100%;"
    data-ng-model="newUser.role" required> 
    <ui-select-match placeholder="Select role">
       {{$select.selected.role}}
    </ui-select-match> 
    <ui-select-choices
       repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
       <span data-ng-bind="role.role"></span>
    </ui-select-choices>
</ui-select>

{{$select.selected.role}

---

在哪里可以添加

allow clear=true

在

ui-select-match

中有控制台错误吗？没有，没有错误。如果我将role.idRole用作role.role，例如select2，我将收到错误消息