title: AngularJS: Multiple dropdowns
body: <p>I am new to AngularJS. I am writing code for dropdowns. Each row has the same dropdown. This is the code</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;tr ng-repeat='item in items&gt;
      &lt;td&gt;
           &lt;span&gt;{{item.profName}}&lt;/span&gt;
           &lt;span ng-if="!item.editProf"&gt;
               &lt;img src="images/img1.png" class="img"          
                           ng-click="editProf({{item.pId}})"&gt;&lt;/img&gt;
          &lt;/span&gt;
          &lt;div ng-if="item.editProf"&gt;
                &lt;select ng-model="prof" class="form-control" name= "profName" 
                        ng-options="prof.name as prof.value for prof in lookups.prof" 
                    ng-Blur="updateProf([item.pId])"&gt;
                &lt;/select&gt;
           &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>$scope.editProf = function(pId)
      {
          var profIndex = $scope.profIndexList[pId];
          var profObj = $scope.profList[profIndex];
          profObj.editProf = true;
          $scope.prof = profObj.profName;
      }
  </code></pre>
  
  <p>When I click on the image it will go to edit mode. When I select an option, it will go to read only mode again. But, when I open two dropdowns, it shows the same option for two dropdowns (When I select an option from the second dropdown, the same option is updated in the first dropdown due to the same scope). How to resolve this issue?
  Help me. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myApp = angular.module('myApp', []);
  
  myApp.controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.cols = [{
        col_id: 'test1',
        col_name: 'First'
      }, {
        col_id: 'test2',
        col_name: 'Second'
      }];
  
      $scope.col = "test1";
      
    }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp" ng-controller="MyCtrl"&gt;
      &lt;select 
        ng-options="col.col_id as col.col_name for col in cols"
        ng-model="col"&gt;
      &lt;/select&gt;
      &lt;select 
        ng-options="col.col_id as col.col_name for col in cols"
        ng-model="col"&gt;
      &lt;/select&gt;
    
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>JSFiddle:</strong>  <a href="http://jsfiddle.net/x8rq2pda/23/" rel="nofollow">http://jsfiddle.net/x8rq2pda/23/</a></p>