I'm facing to an issue with AngularJS - I'm not able to display the selected value in a <select>.

Here is my use case:

I have a view which starts by an ng-repeat to display components. Each component contains a select to choose the vat rate. When creating new items, it looks fine. But when I'm editing existing items, the actual vatRate code is not displayed in the select, and instead I see the default option -- Select VAT Rate -- instead of the selected VAT.

My model only contains the Id of the vat Rate.

With a single component I can use a variable in the $scope to set the current item value, but here I can have multiple components, each of them has its own vat rate, so I am not sure how do that here:

Here is my code

<div ng-repeat=i in items>

   <label>{{i.id}}</label>

   <input ng-model=i.title>

   <select ng-model=i.vatRateId>

      <option value=>--- Select an option ---</option>

      <option ng-repeat=value in vatRates

              ng-selected=i.vatRateId == value.id

              value={{value.id}}>{{value.value}}     

      </option>

   </select>

</div>

And the objects:

$scope.vatRates = [

    { 'id': 1, 'value' : '20' },

    { 'id': 2, 'value' : '10' },

    { 'id': 3, 'value' : '7' }

];



$scope.items = [

    { 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },

    { 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },

    { 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }

];

Here is a live demo to explain my issue:

Demo on PLNKR

I'm not able to set to each item in the select the right value.