角度选择多个未设置所选项目

Question

情景非常简单。我有编辑视图，其中包含具有多个选择的选择元素。选择元素如下所示

<select class="selectpicker" multiple
        ng-model="UserBeingEdited.UberTypes"
        ng-options="uberType.Id as uberType.Name for uberType in UberTypes"></select>
</div>

如果我按特定用户的编辑，则会调用 showEditModal 功能并显示编辑弹出窗口。用户选择了自己的UberTypes对象，因此我选择了他们的ID并分配给UserBeingEdited.UberTypes。

$scope.UserBeingEdited = { UberTypes: []};

$scope.showEditModal = function (user) { 
     for (var i = 0; i < user.UberTypes.length; i++) {
            $scope.UserBeingEdited.UberTypes.push(user.UberTypes[i].Id);
     }
     $("#editUserModal").modal("show");
};

不幸的是，无论如何，他们都没有被选中。令人惊讶的是，如果我在声明时将值设置为属性 UserBeingEdited 然后它可以正常工作，那么就会选择项目。

$scope.UserBeingEdited = { UberTypes: [1,2]}; //this works

似乎angular不会刷新UI中的所选项目。

编辑：

 我有两个项目：Uber1和Uber2。两个项目都已选中，但视图不反映它。如果我打开下拉菜单并选择Uber2它会显示Uber1被选中，显然Uber2被选中，另一次点击被视为取消选择。当我首先点击Uber1，Uber2显示为选中时，会发生同样的情况。

如上图所示，Uber2突出显示，因为我刚刚点击它，但它显示Uber1已选中。两者都是在User的UberTypes中选择的，但是视图只是没有将它们标记为已选中。

http://jsfiddle.net/upusq8ah/7/
我使用bootstrap-select.js作为select元素，并且可能这个库会导致这样的错误，因为不包括它，它工作正常。

解决方案

经过一段时间的挣扎，我不小心碰到了下面的解决方法。您需要在selectPicker上调用refresh，并且必须延迟，否则它将不起作用。

 setTimeout(function () {
       $('.selectpicker').selectpicker('refresh');
 }, 100);
 $("#editUserModal").modal("show");