title: Getting issue while dynamically setting value in drop down list using Angular.js
body: <p>I am getting an issue. I have two drop down list with same value. But when i am setting any value to first drop down list,the second one is taking that one. I am explaining my code below.</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
  &lt;div class="input-group bmargindiv1 col-md-12"&gt;
      &lt;span class="input-group-addon ndrftextwidth text-right" style="width:180px"&gt;Day Form :&lt;/span&gt;
      &lt;select class="form-control"  id="daysFrom" ng-model="daysFrom" ng-options="qua.name for qua in listOfDays track by qua.value "&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;
      &lt;div class="input-group bmargindiv1 col-md-12"&gt;
          &lt;span class="input-group-addon ndrftextwidth text-right" style="width:180px"&gt;Day To :&lt;/span&gt;
          &lt;select class="form-control"  id="daysTo" ng-model="daysTo" ng-options="qu.name for qu in listOfDays track by qu.value "&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here i have two drop down menu and suppose i am setting the value to first one like below.</p>
  
  <pre><code> $scope.daysFrom.value=2;
  
  $scope.listOfDays=[{
          name:'Select Day',
          value:''
      }]
      $scope.daysFrom=$scope.listOfDays[0];
      $scope.daysTo=$scope.listOfDays[0];
      $http({
          method:'GET',
          url:"php/customerInfo.php?action=day",
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }).then(function successCallback(response){
          angular.forEach(response.data,function(obj){
              var data={'name':obj.day_name,'value':obj.day_id};
              $scope.listOfDays.push(data);
  
          })
      },function errorCallback(response) {
      })
  </code></pre>
  
  <p>The second one is also taking the same value which should not happen. I need to set different value to both drop down list. Please help me.</p>