title: AngularJS - Multiple select with setting default value of select dynamically
body: <p>Code for each product  and it's catalogue information in drop down individually using AngularJS:</p>
  
  <pre><code>&lt;ul style="height:250px;" &gt;
  &lt;li data-ng-repeat="product in products" &gt;
  &lt;div&gt; {{SelectedOption.Price}} &lt;/div&gt;
  &lt;select  data-ng-model="SelectedOption"  data-ng-init="SelectedOption=Catalogues[0]" data-ng-options="Catalogue as Catalogue.CName for Catalogue in Catalogues | filter:{ProductId:product.ProductId}:true" &gt;                             
  &lt;/select&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Controller code is like this</p>
  
  <pre><code> var app = angular.module('myApp', []);
   app.controller('myControl', function ($scope) {
   $scope.products = [{ productname: 'Rice1', ProductId: 1}, { productname: 'Rice2', ProductId: 2 },{ productname: 'Rice3', ProductId: 3 }];    
   $scope.Catalogues = [{ ProductId: 1, CatalogueId: 1, CName: '25KG Bag', Price: 500, sortorder: 1 }, { ProductId: 1, CatalogueId: 2, CName: '50KG Bag', Price: 1000, sortorder: 2 },{ ProductId: 2, CatalogueId: 3, CName: '100KG Bag', Price: 1800, sortorder: 2 }];
  </code></pre>
  
  <p>Now want to set the default value of the each product catalogue.cname  dynamically with the first value of the select drop down, Any idea? Much appreciated!</p>
  
  <p><a href="http://plnkr.co/edit/9MYrj1YJt7HzLR9FGDqD?p=preview" rel="nofollow">http://plnkr.co/edit/9MYrj1YJt7HzLR9FGDqD?p=preview</a></p>
  
  <p>Plnkr result want to set for second drop down also with "100KG Bag"</p>