title: Default value on a Select2 with an ng-repeat with data coming from an API call
body: <p>I have an angular select2 as follows:</p>
  
  <pre><code>&lt;select ui-select2 id="clientID" name="clientID" ng-model="newTicket.clientstate" ng-required="true"&gt;
      &lt;option ng-repeat="item in clients track by item.id" value="{{item.clientID}}|{{item.stateID}}" &gt;{{item.displayName}}&lt;/option&gt; 
  &lt;/select&gt;
  </code></pre>
  
  <p>in my controller, clients is set like this (calling a service that returns a $promise from a $resource):</p>
  
  <pre><code>TicketService.getClients().then(
      function(clients) {
          $scope.clients = clients;
      }
  );
  </code></pre>
  
  <p>I also set the initial value of $scope.newTicket.clientstate in the controller.  Because the call to the $resource is asynchronous, the setting of the initial value happens before the query resolves.  </p>
  
  <p>I'm trying to get the dropdown to populate an initial value ("DEMO|DEMO") after the API call completes.  I think that the solution is one of 3 things: setting ng-init on the select, setting ng-selected on the ng-repeat, or doing something in the .then() that happens after the API returns the query.  I can't seem to get the right syntax to work however, and I was hoping to get some advice on how to proceed.  </p>
  
  <p>My first effort to solve things (you can see that in the comments below) was to convert everything to an ng-options, but the ui-select2 library is incompatable with ng-op[tions, so I'm looking for another possibility.  </p>