AngularJS adding 2 properties to associated collections

1. I have a Truck class that has a collection called AxleTypes with the following markup:

public class AxleType : Entity
{
    public string Description { get; set; }
    public string Type { get; set; }
}

2. My angular form includes the following (to keep this as short as possible I omitted the form's other axle types, and I am using $parent, as this is a template and on main form thru ng-include):

<label for="frontAxles">Front Axle: </label>
<input ng-model="$parent.frontAxleType" type="hidden" value="Front">
<select ng-model="$parent.selectedFrontAxle" ng-options="axleType.Description for axleType in axleTypes">
    <option value="" selected>Select Axle Type ..</option>  
</select>

3. The main form inserts a new truck via the truck controller, so in the truck controller:

  a. I instantiate an instance of the AxleTypes collection so the form is populates the select w/axle types.
  b. I instantiate an instance of AxleType to pass the selected data from the form.
  c. I pass the respective ng-models on the form to the AxleType variable.
  d. I add that AxleType variable to the Truck's AxleTypes collection.

  a: if ($scope.axleTypes == undefined || !($scope.axleTypes.length > 0)) 
       { $scope.axleTypes = API.GetAxleTypes(); }

  b: $scope.axleType = {};

  c: var frontAxle = $scope.axleType;
         frontAxle.Description = $scope.selectedFrontAxle;
         frontAxle.Type = $scope.frontAxleType;

  d: newTruck.AxleTypes = [
        angular.copy(frontAxle)
    ];

When debugging this is the end result:

enter image description here

To keep this as short as possible I did not illustrate the 2nd axle type select above. But as you can see, the server is picking up 2 axle types however, both properties for each [Type & Description] are null. Does anyone have any suggestions?

In console.log both values are "undefined".

An interesting observation:

When I hard code the values in the TruckCtrl, everything works fine:

    frontAxle.Description = 'Some Front Value';
    frontAxle.Type = 'Front';
    rearAxle.Description = 'Some Rear Value';
    rearAxle.Type = 'Rear';

    newTruck.AxleTypes = [
        angular.copy(frontAxle),
        angular.copy(rearAxle)
    ];

This would lead someone to think the problem lies with the ng-model on the axle template. However, when I only had one property, ie Description, and not Type in the server class, AxleType, and merely added the select's description via:

    newTruck.AxleTypes = [
        angular.copy($scope.selectedFrontAxle),
        angular.copy($scope.selectedRearAxle)
    ];

The values passed. Very confusing.

SOLVED !!!

There is alot I would like to say to the 40 some odd eyeballs who perused this problem with no input, and Stewie, well, we know what Stewie is. But I won't. Instead I offer help to those who have this same problem.

OK, on to the solution.

Problem #1: Angular does not accept default values in html inputs.

I was confused why I had an input like so: 

<input ng-model="$parent.selectedRearType" type="hidden" value="Front">

and yet angular said it had no value.

SOLUTION TO PROBLEM #1:

You need to initialize the following in your controller:

    $scope.selectedFrontType = 'Front';
    $scope.selectedRearType = 'Rear';

Problem #2: How do you pass values of multiple properties in a collection?

Despite how real-world this scenario is, it is unsettling that there is ZERO documentation on the matter.

SOLUTION TO PROBLEM #2:

In my html I had this select statement: 

  <select ng-model="$parent.selectedFrontAxle" ng-options="axleType.Description for axleType in axleTypes">

Where I erred was thinking this ng-model was STRICTLY the Description property of the class AxleType (see my class model above). That was a huge mistake, it was not. That ng-model was not the Description property of the class but actually the entire class itself. So when examining that select's ng-model, realize it is the AxleType class in its entirety, even if only Description property is provided. So what ng-model was giving me was this as a return value in my controller after the user made a selection:

AxleType class => Description = "Whatever the person selected", Type=""

With that being the case, I needed to fill in the blanks angular did not have, namely in this scenario, the Type property.

Here's the whole solution:

    // beginning of controller when it initializes
    $scope.selectedFrontType = 'Front';
    $scope.selectedRearType = 'Rear';    

   // $scope.axleType = {}; -> NOT NEEDED

    // in the save method    
    // axles
    var frontAxle = $scope.selectedFrontAxle;
    frontAxle.Type = $scope.selectedFrontType;

    var rearAxle = $scope.selectedRearAxle;
    rearAxle.Type = $scope.selectedRearType;

    newTruck.AxleTypes = [
        angular.copy(frontAxle),
        angular.copy(rearAxle)
    ];

enter image description here

I hope I have helped someone!