Answers.Body: <p>For some reason, you can't use the <code>ngOptions</code> directive with select2 multi-select elements. You need to manually specify the <code>&lt;option&gt;</code> elements with <code>ngRepeat</code> like this instead: </p>
  
  
  
  <pre><code>&lt;select
    crm-ui-select="{allowClear: true}"
    ng-model="myVar"
    multiple="multiple"
    class="big"
  &gt;
    &lt;option ng-repeat="option in options" value="{{option.value}}"&gt;
      {{option.label}}
    &lt;/option&gt;
  &lt;/select&gt;
  
  {{myVar}}
  </code></pre>
  
  <p>That produces the desired behavior: </p>
  
  <p><a href="https://i.sstatic.net/UCO32.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/UCO32.png" alt="screenshot"></a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-10T03:15:19.563Z
Answers.LastActivityDate: 2017-07-10T03:15:19.563Z
Answers.UserDisplayName: Sean
Body: <p>I created a select2 element with CiviCRM's <code>crmUiSelect</code> AngularJS directive by using the following code in my controller:</p>
  
  
  
  <pre><code>$scope.options = [
    {"value": "foo", "label": "Foo"},
    {"value": "bar", "label": "Bar"},
    {"value": "baz", "label": "Baz"},
    {"value": "bat", "label": "Bat"}
  ];
  </code></pre>
  
  <p>and the following code in my template: </p>
  
  
  
  <pre><code>&lt;select
    crm-ui-select="{allowClear: true}"
    ng-model="myVar"
    ng-options="option as option.label for option in options track by option.value"
    multiple="multiple"
    class="big"
  &gt;
  &lt;/select&gt;
  
  {{myVar}}
  </code></pre>
  
  <p>It sort of worked, but here's what I ended up with:</p>
  
  <p><a href="https://i.sstatic.net/1pyhN.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/1pyhN.png" alt="screenshot"></a></p>
  
  <p>As you can see in the above screenshot, this element has the following problems: </p>
  
  <ul>
  <li><code>myVar</code> is an array with only <em>one</em> element, even when multiple options are selected.</li>
  <li>The list of options contains options which have already been selected (and the element actually allows these options to be selected more than once).</li>
  </ul>
  
  <p>How can I fix this element so that it works as expected? I want <code>myVar</code> to become <code>["foo", "bar"]</code> in the screenshot above, and I want the user to only see options which have not already been selected.</p>
  
Tags: <developer><angular><select2>
Title: Multi-select not working with crmUiSelect AngularJS select2 directive
ThreadText: # Multi-select not working with crmUiSelect AngularJS select2 directive
  
  (Asked by: username_0 on 2017-07-10)
  
  I created a select2 element with CiviCRM's crmUiSelect AngularJS directive by using the following code in my controller:
  $scope.options = [
    {"value": "foo", "label": "Foo"},
    {"value": "bar", "label": "Bar"},
    {"value": "baz", "label": "Baz"},
    {"value": "bat", "label": "Bat"}
  ];
  
  and the following code in my template: 
  
  
  
  {{myVar}}
  
  It sort of worked, but here's what I ended up with:
  
  As you can see in the above screenshot, this element has the following problems: 
  
  myVar is an array with only one element, even when multiple options are selected.
  The list of options contains options which have already been selected (and the element actually allows these options to be selected more than once).
  
  How can I fix this element so that it works as expected? I want myVar to become ["foo", "bar"] in the screenshot above, and I want the user to only see options which have not already been selected.
  
  **Tags:** developer, angular, select2
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2017-07-10. Score: 1
  
  For some reason, you can't use the ngOptions directive with select2 multi-select elements. You need to manually specify the  elements with ngRepeat like this instead: 
  
    
      {{option.label}}
    
  
  
  {{myVar}}
  
  That produces the desired behavior:
  
  
  ---
  
  