title: Setting initial values of Angular-UI Select2 multiple directive
body: <p>I have a select2 directive for a multiple select of countries with a custom query to grab the data:</p>
  
  <pre><code>// Directive
  &lt;input ng-model="filters.countries" ui-select2="filters.countryOptions"
      data-placeholder="Choose a country..."&gt;
  
  // filters.countryOptions
  { 
      multiple: true,
      query: function() { 
          get_list_of_countries(); 
      }
  }
  
  // Formatted data from remote source
  [
      {id: 'US', text: 'United States'},
      {id: 'CA', text: 'Canada'} ...
  ]
  </code></pre>
  
  <p>I'm trying to set the initially selected values in my controller using:</p>
  
  <pre><code>$scope.filters.countries = [{id: 'US', text: 'United States'}];
  </code></pre>
  
  <p>This does correctly set the model, however this is happening before the select2 initialization has occurred.  As I step through the remaining initialization code the input temporarily displays <code>[Object]</code> before finally blanking out <code>$scope.filters.countries</code> and the input, but it does not display the placeholder text in the input.</p>
  
  <p>To get around this I'm using the following to reset the models' initial value:</p>
  
  <pre><code>$scope.$on('$viewContentLoaded', function() {
      setTimeout(function() {
          $scope.filters.countries = [{id: 'US', text: 'United States'}];
      }, 100);
  });
  </code></pre>
  
  <p>It seems really hackish to be using a <code>setTimeout</code>.  Is there a better way that I'm missing?</p>
  
  <h1>Update 1</h1>
  
  <p>As requested by ProLoser here is a demo and github ticket.</p>
  
  <p>Demo: <a href="http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview">http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview</a></p>
  
  <p>GitHub Issue: <a href="https://github.com/angular-ui/angular-ui/issues/455">https://github.com/angular-ui/angular-ui/issues/455</a></p>
  
  <p>Following ProLoser's advice I started using select2's initSelection function:</p>
  
  <pre><code>initSelection : function (element, callback) {
    callback($(element).data('$ngModelController').$modelValue);
  },
  </code></pre>
  
  <p>It does the trick but still feels like a workaround.</p>