title: Angular + chosen : selected values
body: <p>I have a question about setting ng-model in combination of chosen widget and AngularJS (see this video : <a href="https://www.youtube.com/watch?v=8ozyXwLzFYs" rel="nofollow">https://www.youtube.com/watch?v=8ozyXwLzFYs</a>)</p>
  
  <p>What I would like to do is to set recipients  to some values which would be preselected. Here is HTML and JS for this example (from the video)<br></p>
  
  <pre><code>&lt;h1&gt;Chosen&lt;/h1&gt;
    &lt;select data-placeholder="Choose a Recipient" multiple class="span4 chzn-select" chosen
        ng-model="recipients" ng-options="recipient.name for recipient in recipientsList"&gt;
    &lt;/select&gt;
  
    &lt;p ng-repeat="recipient in recipients"&gt;&lt;strong&gt;{{recipient.name}}&lt;/strong&gt;&lt;/p&gt;
  </code></pre>
  
  <p>And JS in controller<br></p>
  
  <pre><code>$scope.recipientsList = [];
      $scope.recipients = [];
      $scope.fetchRecipients = function() {
          $http.get($scope.url).then(function(result){
  
         $scope.recipientsList = [
      {"id":0, "name":"Recipient 0"},
      {"id":1, "name":"Recipient 1"},
      {"id":2, "name":"Recipient 2"},
      {"id":3, "name":"Recipient 3"},
      {"id":4, "name":"Recipient 4"},
      {"id":5, "name":"Recipient 5"},
      {"id":6, "name":"Recipient 6"},
      {"id":7, "name":"Recipient 7"},
      {"id":8, "name":"Recipient 8"},
      {"id":9, "name":"Recipient 9"},
      {"id":10, "name":"Recipient 10"}
  ];
       $scope.recipients = [{"id":0, "name":"Recipient 0"}, 
       {"id":1, "name":"Recipient 1"}];
       });
    }
  
      $scope.fetchRecipients();
  </code></pre>
  
  <p>I tried a few combination but values in menu aren't preselected, although they are stored in recipients, because they are visible below the menu. You can see this example here:
  <a href="http://jsfiddle.net/YKZSw/8/" rel="nofollow">http://jsfiddle.net/YKZSw/8/</a></p>
  
  <p>Thanks for your ansers.</p>
  
  <p>Matej</p>