My Bootstrap Multiselect is empty

Question

I have installed the bower component in my angularjs application, I have a multiselect

 <select class="multiselect" id="mdf.modifier.id" multiple="multiple" >
      <option disabled selected value> -- select {{mdf.modifier.max == 1 ? 'one' : 'multiple' }} -- </option>
      <option ng-repeat="option in mdf.options" value="option.id" track by option.id>
       {{ option.name | highlight:for_user }}, +{{ option.price }}
      </option>
  </select>

And calling the javascript method from my controller

$('.multiselect').multiselect();

My multiselect is getting out as an empty multiselect. The ng-repeat does print some options I have checked.

Answer 1

Switch to angular-ui bootstrap and you will be fine. Throw jQuery out of your application. Finaly it should work like in this simple fiddle. Please check this "Thinking in AngularJS way" to learn more about not mixing jQuery with AngularJS.

View

<div ng-app="app" ng-controller="myCtrl">      
   <ui-select multiple ng-model="selected" theme="bootstrap" close-on-select="false" title="Choose a person">
    <ui-select-match placeholder="Pick some ..">{{$item.value}}</ui-select-match>
    <ui-select-choices repeat="val in values track by val.value">
      <div ng-bind="val.value | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

AnuglarJS Application

var app = angular.module('app', ['ui.select']);

app.controller("myCtrl", function ($scope) {

    $scope.values = [{
        'key': 22,
        'value': 'Kevin'
    }, {
        'key': 24,
        'value': 'Fiona'
    }];

    $scope.selected = null;
});