Ng-options in bootstrap-select doesn't work

Question

I want to add multi select to my app, but when I try loading data from controller select doesn't work. I used ng-options and ng-repeat in select but both doesn't work. My plugin: bootstrap-select

My code in jsbin

Answer 1

You are using a jQuery plugin in AngularJS, you can use it by calling the function in a directive binded with the element as shown below:

HTML:

<select class="selectpicker" bootstrap-selectpicker data-ng-model="modelValue" multiple="" data-actions-box="true">
 <option>Mustard</option>
 <option>Ketchup</option>
 <option>Relish</option>
</select> 

Directive:

app.directive('bootstrapSelectpicker'), function(){
var bootDirective = {
    restrict : 'A',
    link: function(scope, element, attr){
        $(element).selectpicker();
    }         
};
   return bootDirective;
});

But i would recommend using Angularjs based dropwdowns, take a look at following plugin.

http://isteven.github.io/angular-multi-select/#/main

http://angular-ui.github.io/ui-select/

http://ngmodules.org/modules/angular-bootstrap-multiselect https://github.com/dotansimha/angularjs-dropdown-multiselect

Hope this helps :)