title: Angular ng-options in select2 - settings value property
body: <p>I have an array of countries:</p>
  
  <pre><code>var countriesList: [
                  {name: "Israel", code: "IL"},
                  {name: "India", code: "IN"},
                  {name: "Andorra", code: "AD"}
              ]
  </code></pre>
  
  <p>and an array of selected countries:</p>
  
  <pre><code>    selectedCountries: [
                      {
                          country:"IL"
                      }
                  ] 
  </code></pre>
  
  <p>I'm using select2 for selecting countries.
  I started with ng-repeat for generating the <code>&lt;options/&gt;</code> tag:</p>
  
  <pre><code> &lt;select
      id="countriesList"
      ui-select2
      multiple
      ng-model='data.selectedCountries'
      data-placeholder='Choose or Search for Countries'
      name='locations'
      ng-change='geoTargetingChanged()'&gt;
  
         &lt;option ng-repeat="country in data.countriesList" value="{{country.code}}"&gt;{{country.name}}&lt;/option&gt;                
  &lt;/select&gt;
  </code></pre>
  
  <p>this method worked well, but it caused the form to be <code>$dirty</code> right at start.
  so I started using the `ng-options- mechanism (after reading <a href="https://stackoverflow.com/questions/12139152/how-to-set-value-property-in-angularjs-ng-options">this answer</a>):</p>
  
  <pre><code>&lt;select
              id="countriesList"
              ui-select2
              multiple
              ng-model='data.selectedCountries'
              data-placeholder='Choose or Search for Countries'
              name='locations'
              ng-change='geoTargetingChanged()'
              ng-options="country.code as country.name for country in data.campaignSettings.countriesList"&gt;
             &lt;option&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Now the problem is that the value of the items is not the country code, it is their index in the array.</p>
  
  <p>Am i missing something?</p>