AngularJS – set default multi select drop down value from controller


I am using AngularJS multi select drop down code from the following source:

I am using the same drop down twice in the same html page. I want to display the default selected drop down name of first multi select drop down as "Projects" and the second as "Environments".

The code in the multiselect.js file is using a directive and scope.header is set to "Select" as default and i want to change the default name "Select" to "Projects" and "Environments" in my html page.

I need your help to update it either using multiselect syntax in html page or from the controller to pass the scope.header value.



The string value ‘Select’ is hardcoded into the directive. You will need to modify the code to make it dynamic.


Here how I changed it.


I added the header attribute with the text I wanted it to show.

Lines 17-24

  <multiselect class="input-xlarge" multiple="true"
        options=" for c in cars"
        change="selected()" ></multiselect>
        <div class="well well-small">


I made the scope.header set to the attribute and default to ‘Select’ if nothing is given.

Line 45

scope.header = attrs.header || 'Select';

Line 119

if (!modelCtrl.$modelValue || !modelCtrl.$modelValue.length) return scope.header = attrs.header || 'Select';

Answered By – Michael Warner

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published