Setting the value of a drop down list from a record that is selected

Question

I am using AngularJS and I need to set a selected option of a drop-down list control when a record is selected for editing and loaded to a form. The dropdown should still have the other values available if the user wants to select a different one.

When there is no record selected, the form should still have the list of values available if the user wants to create a new record.

Down below is the screen shot of my form when it first loads. You can see in the screen shot that the Instruments drop-down-list shows all the instruments available. This list is loaded through a web service that is called when the form loads.

It puts all the contents into an array named: $scope.instruments

Code:

  //Get Instruments
  $http.get('/api/Instrument/GetAllInstruments').success(function (data, status, headers, config) {
      $scope.instruments = data;
  }).error(function (data, status, headers, config) {
      $scope.error = "An error has occurred while fetching Instruments." + data;
  });

Below the form, there is a grid with all the records:

When a user clicks on the edit icon, the record loads on the form:

The record has values for the instrument, style, and scoring but I do not know how to use those values from the record, to set the selected value on the drop down.

This is the code that I am using to load the selected record and assign instrument id, style id, scoring id. Is not the most elegant code, but this is as far as I have been able to get:

      //Edit Store Page
  $scope.edit = function () {

      if (this.page.SPPreambleID === null || this.page.SPPreambleID === 0)
      {
          this.page.SPPreambleID = -1;
      }

      $http.get('/api/StorePage/GetStorePage?StorePageID=' + this.page.StorePageID + '&SPPreambleID=' + this.page.SPPreambleID).success(function (data) {

          $scope.updateShow = true;
          $scope.addShow = false;              

          $scope.newpage = data;

          angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) {

              if (attribute == 1) {
                  $scope.recordInstrument = $scope.newpage.AttributeID[0];                      
              }

              if (attribute == 2) {
                  $scope.recordStyle = $scope.newpage.AttributeID[1];
              }

              if (attribute == 3) {
                  $scope.recordScoring = $scope.newpage.AttributeID[2];
              }
          });


      }).error(function () {
          $scope.error = "An Error has occured while Editing this Store Page!" + data;
      });
  }

And this is the HTML for the drop downs:

                @* Instrument *@
                <div class="form-group">
                    <div class="col-sm-10 space">
                        <select class="form-control" name="instrumentfilter" data-ng-model="instrumentfilter" required
                            data-ng-options="i.ID as i.Description for i in instruments track by i.ID" data-ng-change="">
                            <option value="">-- Choose a Style --</option>
                        </select>
                    </div>
                </div>


                @* Style *@
                <div class="form-group">
                    <div class="col-sm-10 space">
                        <select class="form-control" name="stylefilter" data-ng-model="stylefilter" required
                            data-ng-options="st.ID as st.Description for st in styles track by st.ID" data-ng-change="">
                            <option value="">-- Choose a Style --</option>
                        </select>
                    </div>
                </div>

                @* Scoring *@
                <div class="form-group">
                    <div class="col-sm-10 space">
                        <select class="form-control" name="scoringfilter" data-ng-model="scoringfilter" required
                            data-ng-options="sc.ID as sc.Description for sc in scorings track by sc.ID">
                            <option value="">-- Choose a Scoring --</option>
                        </select>
                    </div>
                </div>

Please any help I can get in this forum would be great. I have been struggling with this all day, and I am sure it should not be too complicated.

Update

This is the updated HTML after recommendation to modified data-ng-model to use the scope variables recordInstrument, recordStyle, and recordScoring.

                @* Instrument *@
                <div class="form-group">
                    <div class="col-sm-10 space">
                        <select class="form-control" name="instrumentfilter" data-ng-model="recordInstrument" required
                            data-ng-options="i.ID as i.Description for i in instruments track by i.ID" data-ng-change="">
                            <option value="">-- Choose a Style --</option>
                        </select>
                    </div>
                </div>


                @* Style *@
                <div class="form-group">
                    <div class="col-sm-10 space">
                        <select class="form-control" name="stylefilter" data-ng-model="recordStyle" required
                            data-ng-options="st.ID as st.Description for st in styles track by st.ID" data-ng-change="">
                            <option value="">-- Choose a Style --</option>
                        </select>
                    </div>
                </div>

Answer 1

assuming that JS code

angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) {

          if (attribute == 1) {
              $scope.recordInstrument = getRecordInstrument($scope.newpage.AttributeID[0]);                      
          }

          if (attribute == 2) {
              $scope.recordStyle = getRecordStyle($scope.newpage.AttributeID[1]);
          }

          if (attribute == 3) {
              $scope.recordScoring = getRecordScoring($scope.newpage.AttributeID[2]);
          }
      });

get correct IDs, and there are 3 functions getRecordInstrument, getRecordStyle and getRecordScoring which fetch instrument, style or scoring objects by its ID, try to assign these IDs to selects via ngModel directive:

            @* Style *@
            <div class="form-group">
                <div class="col-sm-10 space">
                    <select class="form-control" name="instrumentfilter" data-ng-model="recordInstrument" required
                        data-ng-options="i.ID as i.Description for i in instruments track by i.ID">
                        <option value="">-- Choose a Style --</option>
                    </select>
                </div>
            </div>


            @* Style *@
            <div class="form-group">
                <div class="col-sm-10 space">
                    <select class="form-control" name="stylefilter" data-ng-model="recordStyle" required
                        data-ng-options="st.ID as st.Description for st in styles track by st.ID">
                        <option value="">-- Choose a Style --</option>
                    </select>
                </div>
            </div>

            @* Scoring *@
            <div class="form-group">
                <div class="col-sm-10 space">
                    <select class="form-control" name="scoringfilter" data-ng-model="recordScoring" required
                        data-ng-options="sc.ID as sc.Description for sc in scorings track by sc.ID">
                        <option value="">-- Choose a Scoring --</option>
                    </select>
                </div>
            </div>