title: Display dropdown on table data cell in html using angularjs
body: <p>I am trying to populate rows in my html table based on my angularjs response. My aim is to make one of my table data cell in a drop down format. </p>
  
  <p><strong>Requirements</strong>:</p>
  
  <ul>
  <li>The drop down will have three values (A, B and C).</li>
  <li>The initial value should be the value obtained in my
  angularjs response.</li>
  <li>The other values of the dropdown should be the remaining values that is not obtained in the response.</li>
  </ul>
  
  <p><strong>In detail</strong>:</p>
  
  <p>I have this table row:</p>
  
  <pre><code>&lt;tbody&gt;
     &lt;tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_republish_records" id="{{row.botMainId}}"&gt;
        &lt;td&gt;&lt;select class="custom-select" style="margin-left:0px" ng-model="botId" ng-options="choice.name for choice in botIds"&gt;&lt;/select&gt;&lt;/td&gt;
        &lt;td ng-bind="row.botSet"&gt;&lt;/td&gt;
        &lt;td ng-bind="row.botNumber"&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>And, I have the response data in this format:</p>
  
  <pre><code>0: {botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702", $$hashKey: "object:27"}
  1: {botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402", $$hashKey: "object:28"}
  2: {botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702", $$hashKey: "object:29"}
  3: {botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102", $$hashKey: "object:30"}
  4: {botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502", $$hashKey: "object:31"}
  5: {botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502", $$hashKey: "object:32"}
  6: {botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002", $$hashKey: "object:33"}
  7: {botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202", $$hashKey: "object:34"}
  8: {botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802", $$hashKey: "object:35"}
  9: {botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902", $$hashKey: "object:36"}
  </code></pre>
  
  <p>From this data, the dropdown on the first row, second row and third dow should hold the inital value as A and then B, C as the other dropdown values.</p>
  
  <p>The fourth and fifth row should hold B as the initial value and C and A as the other dropdown values and so on.</p>
  
  <p>Now, my js of what I've tried so far:</p>
  
  <pre><code>$http({
                                      'url' : '/myURL',
                                      'method' : 'POST',
                                      'headers' : {
                                          'Content-Type' : 'application/json'
                                      }
                                  }).then(function(response) {
                                      console.log(response.data);
                                      var arrayLength = response.data.length;
                                      for (var i = 0; i &lt; arrayLength; i++) {
                                         /* console.log(response.data[i].botMainId);*/
                                          var botRuleCode1 = null;
                                          var botRuleCode2 = null;
                                          var botRuleCode3 = null;
                                          if (response.data[i].botMainId == 'A'){
                                              botRuleCode1 = 'A';
                                              botRuleCode2 = 'B';
                                              botRuleCode3 = 'C';
                                          } else if (response.data[i].botMainId == 'B'){
                                              botRuleCode1 = 'B';
                                              botRuleCode2 = 'A';
                                              botRuleCode3 = 'C';
                                          } else {
                                              botRuleCode1 = 'C';
                                              botRuleCode2 = 'B';
                                              botRuleCode3 = 'A';
                                          }
                                          $scope.botIds = [ {
                                              id : botRuleCode1,
                                              name : botRuleCode1
                                          }, {
                                              id : botRuleCode2,
                                              name : botRuleCode2
                                          }, {
                                              id : botRuleCode3,
                                              name : botRuleCode3
                                          }];
  
                                          $scope.botId = $scope.botIds[0];
                                      }
                                      $scope.botData = response.data;
  
                                      $window.scrollTo(0, 0);
  
                                  })
  </code></pre>
  
  <p>This script will take the last value of the <code>for</code> is set for all the dropdowns, making a common dropdown value for all the rows.</p>
  
  <p>Can someone help on how could I change this code?</p>