Angularjs UI multiselect with initial selection
<p>I am using Angularjs UI select. I'm facing a problem.</p>

<p>This is my code:</p>

<p><strong>Javascript:</strong></p>

<pre><code>$scope.user.SelectedCategories
$scope.Categories= [
  { value: 'Reading', name: 'Reading Books',Id : 4 },
  { value: 'Sports', name: 'Physical Activity',Id : 9 },
  { value: 'Movies', name: 'Entertainment',Id : 7 },
  { value: 'Video Games', name: 'Passion',Id : 11 }
];
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="input-group"&gt;
      &lt;ui-select multiple ng-model="user.SelectedCategories" theme="bootstrap" sortable="true" close-on-select="false" style="width: 350px;"&gt;
      &lt;ui-select-match placeholder="Select Categories..."&gt;{{$item.Value}}&lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="category.Id as category in  Categories"&gt;{{category.Value}}
      &lt;/ui-select-choices&gt;
&lt;/div&gt;
</code></pre>

<p>Now how can I display selected categories as selected on page reload.Selected categories will be saved in the database and on page reload they will be available on the client side but how can I show them as selected and they also must not appear in the dropdownlist. </p>

<p><strong>Edit</strong>
Half of my problem is solved by nicost's suggestion of assigning selected categories fetched from database to $scope.SelectedCategories but the rest of the problem is those categories also appear in the dropdown.</p>

<p>The default behavior of ui multiselect is that if I select one category from the dropdown it is displayed in the textbox above as selected and that category is removed from the dropdown list and when I remove any category from the selected categories that category appears in the dropdownlist.</p>

<p>In my case If I remove selected categories from available Categories' list(I'm doing that on the server side) on page reload then they dont appear in the dropdowm but when I remove any selected category that category does not appear in the dropdownlist.</p>