如何使用带角度的bootstrap-select

Question

我想用bootstrap-select设置下拉列表的样式。 页面中有两个下拉列表。第一个有硬编码选项。第二个动态绑定数据库中的数据。

bootstrap-select适用于第一个但不适用于第二个。它添加了一个文本，没有选择＆＃39;并且选项也没有约束。

如何解决此问题。

ASPX：

mkfs.ntfs /dev/sdc1

Ctrl.js

<link href="../assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="../assets/js/bootstrap-select.js"></script>
<script src="../assets/js/angular-1.3.16.min.js"></script>
<script src="../scripts/app.js"></script>
<script src="../scripts/controllers/Ctrl.js"></script>
<script src="../scripts/services/Factory.js"></script>
<script src="../scripts/directives/directives.js"></script>

<select id="ddlReports" bootstrapselectpicker >
<option data-ng-repeat="item in Reports" value="{{item.Id}}">{{item.Name}}</option>
</select>

<select id="ddlSets" bootstrapselectpicker>
<option value="0">-- Select Question Set --</option>
<option data-ng-repeat="item in QuestionSets" value="{{item.SetId}}">{{item.Title}}</option>
</select>

directive.js

app.controller("Ctrl", ["$scope", "Factory", function ($scope, Factory) {
 var init = function() {
 $scope.Reports = [
            { Id: 1, Name: "abc" },
            { Id: 2, Name: "def" }
        ];
  var promise = Factory.GetData();
                promise.then(function (success) {
                    if (success.data != null && success.data != '') {
                        var data = success.data;
                        $scope.QuestionSets = data.QuestionSets;
                    }                    
                },
                function (error) {                    
                });
 }
 init();
}]);