title: Angularjs ui-select: how to set selected value for multiple dropdowns
body: <p>I have multiple ui-selects on the page. How can I set selected value for each of the item separately, thus using single list retrieved from service?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
     &lt;ui-select class="col-sm-12 no-padding" ng-model="mappingStrengthList.selected"&gt;
     &lt;ui-select-match placeholder="Choose strength"&gt;
     &lt;span ng-bind="$select.selected.name"&gt;&lt;/span&gt;
     &lt;/ui-select-match&gt;
     &lt;ui-select-choices repeat="item in (mappingStrengthList | filter: $select.search) track by item.id"&gt;
     &lt;span ng-bind="item.name"&gt;&lt;/span&gt;
     &lt;/ui-select-choices&gt;
     &lt;/ui-select&gt;
   &lt;/div&gt; 
  &lt;div class="col-sm-4"&gt;
     &lt;ui-select class="col-sm-12 no-padding" ng-model="mappingStrengthList.selected"&gt;
     &lt;ui-select-match placeholder="Choose strength"&gt;
     &lt;span ng-bind="$select.selected.name"&gt;&lt;/span&gt;
     &lt;/ui-select-match&gt;
     &lt;ui-select-choices repeat="item in (mappingStrengthList | filter: $select.search) track by item.id"&gt;
     &lt;span ng-bind="item.name"&gt;&lt;/span&gt;
     &lt;/ui-select-choices&gt;
     &lt;/ui-select&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>ListService.getList('mapping-strength').then(function (results) {
                  $scope.mappingStrengthList = results;
              }, function (error) {
                  console.log(error);
              });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/3J8LA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3J8LA.png" alt="enter image description here"></a></p>