Only get first level object

Question

I have my object selected via a selection box printed out on the page as the user selects the option.

However it currently prints the parent object and all other objects nested within the parent object.

A example of my array

$scope.productsandformats = [
     {
                "Pname": "parent",
                "format": [
                    {"Fname": "child", "id": "4"},
                    {"Fname": "second child", "id": "5"}
                ]
            }
];

My angular and html selection box

<select ng-model="formData.ProductType"
        ng-options="product.Pname for product in productsandformats">
     <option value="">- Please Choose -</option>
</select>

<pre class="col-sm-12 ng-binding">
   {{ formData }}
</pre>

so currently when I select parent I get

{"ProductType":{"Pname":"parent","format":[{"Fname":"child","id":"4"},{"Fname":"second child","id":"5"}]}}

What I expect to see

{"ProductType":{"Pname":"parent"}}

What I need

I just want to see the Pname so the top level objects eg parent, parent2, parent3 so on not the children objects.

How can I alter this to just show the top level object?

@George answer almost works

difficulty my second drop down should be populated with the child objects of the selected parent and the final string should read as following if select parent from first option then second child from second option.

ProductType: Pname: parent, formatType: Fname: child

**Angular code for both boxes, second populated with children of the selected parent **

 <select ng-model="formData.ProductType"
            ng-options="product.Pname for product in productsandformats">
        <option value="">- Please Choose -</option>
    </select>

    <select ng-model="formData.formatType"
            ng-options="format.Fname for format in formData.ProductType.format"
            ng-if="formData.ProductType">
        <option value="">- Please Choose -</option>
    </select>

Answer 1

If you read the documentation on ngOptions you can use select as to specify was object gets set on the ngModel

For the second select I suggest having an ng-change on the first select to store that object in another variable on the scope that you can use for the second select.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.productsandformats = [{
    "Pname": "parent",
    "format": [{
      "Fname": "child",
      "id": "4"
    }, {
      "Fname": "second child",
      "id": "5"
    }]
  }];

  $scope.formats = [];

  $scope.productTypeChange = function() {
    $scope.formats = $scope.productsandformats.find(ps => ps.Pname == $scope.formData.ProductType.Pname);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <select ng-model="formData.ProductType.Pname" ng-change="productTypeChange()" ng-options="product.Pname as product.Pname for product in productsandformats">
    <option value="">- Please Choose -</option>
  </select>
    <select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.Pname">
    <option value="">- Please Choose -</option>
  </select>
    <pre class="col-sm-12 ng-binding">
   {{ formData }}
   </pre>
  </div>

</div>