Can't get bootstrap multiselect to work with angular

Question

I'm trying to get the bootstrap multiselect widget to work. It works when I hardcode all the options, like this:

<select id="topic-select" multiple="multiple">
  <option val='math'>math</option>
  <option val='critical_reading'>critical reading</option>
  <option val='writing'>writing</option>
</select>



$("#topic-select").multiselect({
  includeSelectAllOption: true,
  selectAllText: 'composite score',
  allSelectedText: 'composite score',
  selectAllNumber: false,
});

but if I try to populate the options with angular, like this:

<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
 </select>

then the dropdown window kindof bugs out, and doesn't show any of the options.

If I remove the javascript turning it into a multiselect, then it DOES show all the options.

I took a look at this similar question: angularjs-ng-repeat-in-bootstrap-multiselect-dropdown but couldn't didn't have any luck with it.

Answer 1

Instead of populating the options with angular, I just add them to the div with vanilla javascript like this:

var topicSelect = $("#topic-select");
for (var topicId in topicList) {
  topicSelect[0].add(new Option(topicList[topicId], topicId));
}

and everything works now.