How to use bootstrap-select with angular - angularjs

Question

I would like to style my dropdowns with bootstrap-select.
There are two dropdowns in the page. The first one has hardcoded options. The second one is bound dynamically with data from database.
The bootstrap-select is applied all well for the first one but not the second. It adds a text 'Nothing selected' and the options also are not bound.
How to fix this.
aspx:
<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>
Ctrl.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();
}]);
directive.js
app.directive('bootstrapselectpicker', function ($timeout) {
return {
restrict: "A",
link: function (scope, element, attrs, ctrl) {
$timeout(function () {
element.selectpicker();
});
}
};
});