Angular model value is appearing as an object

Question

I have a function that is saving user preferences. These preferences are selected via 3 dropdown (select) objects. The dropdowns are filled with the following code:

<div ng-controller="UserCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-3">
            <div class="form-group">
                <label for="lawType">Select a Type of Law</label>
                <select class="form-control" id="lawType" name="lawType" ng-change="getCourthouse();" ng-model="typeoflaw.LitigationType" ng-options="typeoflaw.LitigationType for typeoflaw in typeoflaw track by typeoflaw.LitigationCode" required>
                    <option value="">--Select a Type of Law--</option>
                   <!-- <option value="0" selected>--Select a Type of Law--</option>
                    <option ng-repeat="type in typeoflaw" value="{{ type.LitigationCode}}">{{ type.LitigationType }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtHouse.length">
                <label for="courtHouse">Select a Courthouse</label>
                <select class="form-control" id="courtHouse" name="courtHouse" ng-model="courtHouse.Loc_ID" ng-change="getCourtroom();" ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name" required>
                    <option value="">--Select a Courthouse--</option>
                    <!--<option ng-repeat="bldg in courtHouse track by $index" value="{{ bldg.Loc_ID }}">{{ bldg.Loc_Name }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtRoom.length">
                <label for="courtRoom">Select a Department</label>
                <select class="form-control" id="courtRoom" name="courtRoom" ng-model="courtRoom.CourtRoom" ng-options="courtRoom.CourtRoom for courtRoom in courtRoom track by courtRoom.CourtRoom" required>
                    <option value="">--Select a Department--</option>
                    <!-- <option ng-repeat="room in courtRoom" value="{{ room.CourtRoom }}">{{ room.CourtRoom }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="favorite-button" ng-show="courtRoom.length">
                <button class="btn  btn-primary pull-left" ng-click="SavePreferences();">Add Favorite</button>
            </div>

        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-12 favorite-header">
            <h2>Your Saved Favorites</h2>
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-3 favorite-column-title">
            Courthouse
        </div>
        <div class="col-sm-3 favorite-column-title">
            Department
        </div>
        <div class="col-sm-3 favorite-column-title">
            Type of Law
        </div>
        <div class="col-sm-3 favorite-column-title">
            Default
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length" ng-model="userPreferences" ng-repeat-start="userPreference in userPreferences">
        <div class="col-sm-3">
            {{ userPreference.LocName }}
        </div>
        <div class="col-sm-3">
            {{ userPreference.CourtRoom}}
        </div>
        <div class="col-sm-3">
            {{ userPreference.LitigationType }}
        </div>
        <div class="col-sm-3">
            <span ng-if="showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-ok green-check"></span>
            <span ng-if="!showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-heart red-heart" ng-click="setAsDefault();"></span>
        </div>
    </div>
    <div ng-repeat-end></div>
</div>

The code for the function is as follows:

$scope.SavePreferences = function () {
          $scope.userid = 'dpeng';
          $scope.departmentNumber = $scope.courtRoom.CourtRoom;
          $scope.newPreference = {
              "PreferenceID": "0",
              "UserID": $scope.userid,
              "LocID": $scope.courtHouseId.Loc_ID,
              "CourtRoom": $scope.departmentNumber,
              "IsDefault" : $scope.isDefault
          };
          $http({
              method: 'POST',
              url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
              data: $scope.newPreference,
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          }).error(function (status, data) {
              console.log(data.error);
          });
      }

When the $scope.newPreference is sent to the server CourtRoom is an object rather than just a straight value. So it is basically "CourtRoom.CourtRoom = 5" I just want "5".

This is what I see in Visual Studio debugger:

CourtRoom: Object
CourtRoom: "A12" <-- this is what I see when I expand CourtRoom
proto: Object
IsDefault: false
LocID: "ATP"
PreferenceID: "0"
UserID: "dpeng"
proto: Object

How do I get straight to that value without having it give me an object back?

EDIT FOR CLARIFICATION:

Based upon the answers I've gotten so far I can tell that I didn't make my question clear enough.

I WANT to send the object newPreference to the service, but WITHIN newPreference is an object called "CourtRoom" and I don't want that going as an object, i want it going as a single value. Right now it is sending over as an object while all other parameters are sent as a single item.

Answer 1

I changed my function as follows:

$scope.SavePreferences = function () {
          $scope.userid = 'dpeng';
          $scope.departmentNumber = $scope.courtRoom.CourtRoom;
          $scope.newPreference = {
              "PreferenceID": "0",
              "UserID": $scope.userid,
              "LocID": $scope.courtHouseId.Loc_ID,
              "CourtRoom": $scope.departmentNumber.CourtRoom,
              "IsDefault" : $scope.isDefault
          };
          $http({
              method: 'POST',
              url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
              data: $scope.newPreference,
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          }).error(function (status, data) {
              console.log(data.error);
          });
      }

I added .CourtRoom and it worked.

Answer 2

If you only want to send the CourtRoom parameter, then you'd have to do it like this:

$http({
  method: 'POST',
  url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
  params: {
    CourtRoom: $scope.departmentNumber
  },
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

Since you're using form data, you should use params instead of data. https://stackoverflow.com/a/11443066/2163901

Answer 3

You should send only the CourtRoom value in your HTTP POST instead of the entire newPreference object:

$http({
          method: 'POST',
          url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
          data: $scope.newPreference.CourtRoom,
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          }
      }).error(function (status, data) {
          console.log(data.error);
      });