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:
  
  ```
  <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"
  >
  </select>
  
  {{myVar}}
  
  ```
  
  It sort of worked, but here's what I ended up with:
  
  [![screenshot](https://i.sstatic.net/1pyhN.png)](https://i.sstatic.net/1pyhN.png)
  
  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 `<option>` elements with `ngRepeat` like this instead:
  
  ```
  <select
    crm-ui-select="{allowClear: true}"
    ng-model="myVar"
    multiple="multiple"
    class="big"
  >
    <option ng-repeat="option in options" value="{{option.value}}">
      {{option.label}}
    </option>
  </select>
  
  {{myVar}}
  
  ```
  
  That produces the desired behavior:
  
  [![screenshot](https://i.sstatic.net/UCO32.png)](https://i.sstatic.net/UCO32.png)
  
  
  ---
  
  