AngularJS Recursive Data Structure Traversal with Unique Keys and Arrays - angularjs

Question

I believe this question is unique in that I am attempting to traverse a data structure containing objects with unique keys and arrays. I've seen other questions regarding this subject, but they reference simple data structures with multiple levels the same object.
Ultimately, I would like to be able to generate a form from any given data structure simply by traversing it as an object or an array.
I've created two directives, one for traversing an object and the other for traversing an array. Basically I'm trying to pass in the array or object as a parameter into the directive's isolated scope, then generate the associated form fields by referencing the scope variable scope.context. I'm not getting any errors, but I'm also not getting the expected result.
Am I approaching this the right way?
Any thoughts or suggestions would be greatly appreciated.
HTML
<div ng-app="app" ng-controller="CreateFormController">
<div traverse-object="{{model.form}}"></div>
<script type="text/ng-template" id="traverseObject.tmpl.html">
<div ng-repeat="(key, value) in context">
<div ng-switch="getTypeOf(value)">
<div ng-switch-when="string">
{{key}} string
</div>
<div ng-switch-when="null">
{{key}} null
</div>
<div ng-switch-when="object">
{{key}} object
<div traverseObject = "{{value}}"></div>
</div>
<div ng-switch-when="array">
{{key}} array
<div traverseArray = "{{value}}"></div>
</div>
<div ng-switch-default="true">
{{key}} other
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="traverseArray.tmpl.html">
<div ng-repeat="item in context">
<div ng-switch="getTypeOf(item)">
<div ng-switch-when="string">
{{item}}
</div>
<div ng-switch-when="null">
{{item}}
</div>
<div ng-switch-when="object">
<div traverseObject = "{{item}}"></div
</div>
<div ng-switch-when="array">
<div traverseArray = "{{item}}"></div>
</div>
<div ng-switch-default="true">
{{item}}
</div>
</div>
</div>
</script>
</div>
JS
var json = {
"ProjectName": null,
"ProjectNumber": null,
"BillingAU": null,
"BillingMailCode": null,
"BorrowersName": null,
"Comment": null,
"CompanyNumber": null,
"DesiredDeliveryDate": null,
"LendingGroup": "",
"LendingOffice": null,
"LoanAmount": null,
"LoanAmountOther": null,
"LoanCloseDate": null,
"LoanNumber": null,
"LoanTerm": null,
"Obligor": null,
"OriginatingAU": null,
"PreviousProjectNumber": null,
"PreviousReport": null,
"TransactionComments": null,
"IsInvolvement": null,
"InvolvementType": "",
"IsFFESecured": null,
"IsJuniorLien": null,
"IsParticipationLoan": null,
"IsWithCrossCollateral": null,
"IsWithLoanGuarantor": null,
"TotalParticipationLoanAmount": null,
"LienPosition": null,
"LoanExist": "",
"LoanType": "",
"OtherLien": null,
"PriorityApproval": "",
"ProjectPurpose": "",
"LoanTransType": "",
"ServiceRequestPeople": [
{
"PersonType": "Account Officer",
"FirstName": null,
"LastName": null,
"Email": null,
"Company": null,
"CompanyNumber": null,
"ImportUserId": null,
"PhoneNumber": "",
"OtherNumber": "",
"FaxNumber": "",
"Address": {
"StreetAddress": "",
"StreetAddress2": "",
"City": "",
"State": "",
"ZipCode": "",
"County": "",
"Nation": "United States",
"Links": []
},
"Links": []
}
],
"Properties": [
{
"DevelopmentName": null,
"PropertyTypesMajor": "",
"PropertyTypes": "",
"PropertyAddress": {
"StreetAddress": "",
"StreetAddress2": "",
"City": "",
"State": "",
"ZipCode": "",
"County": "",
"Nation": "United States",
"Links": []
},
"PropertyDescription": null,
"PropertyCondition": "",
"PropertyRemark": null,
"PropertyStatus": "",
"PropertyTenancy": "",
"ExternalReferenceNumber": null,
"FhaCaseNumber": null,
"LegalComment": null,
"NumberOfBuildings": null,
"NumberOfTenants": null,
"NumberOfUnits": null,
"Occupancy": null,
"PriorSaleDate": "",
"PriorSalePurchaseAmount": null,
"TotalPurchaseAmount": null,
"ProposedUse": null,
"CurrentUse": null,
"Stories": null,
"YearBuilt": null,
"YearLastRenovate": null,
"RentableArea": null,
"Zoning": null,
"ZoningCodeDescription": null,
"MapNumber": null,
"IsForSale": null,
"ListSaleAmount": null,
"IsLegalDescription": null,
"IsPendingSale": null,
"PendingSaleAmount": null,
"PendingSaleDate": "",
"IsRenovationDemo": null,
"RenovationDemoDescription": null,
"IsFloodPlain": null,
"FloodPlainDescription": null,
"FloodPlainSurveyed": null,
"IsGroundLease": null,
"ParkingType": [
""
],
"PrimaryImprovement": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"SecondaryImprovement": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"LandSize": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"ExcessLandSize": {
"Measurement": 0,
"Unit": "",
"Links": []
},
"PropertyParcel": [
{
"ParcelNumber": null,
"Size": 0,
"Links": []
}
],
"PropertyPeople": [
{
"PersonType": "",
"FirstName": null,
"LastName": null,
"Email": null,
"PhoneNumber": "",
"OtherNumber": "",
"FaxNumber": "",
"Affiliation": null,
"Links": []
}
],
"Services": [
{
"ServiceType": null,
"Comments": null,
"SentDate": "",
"DesiredDeliveryDate": "",
"Links": []
}
],
"Links": []
}
],
"Links": []
}
var app = angular.module('app', [])
app.controller('CreateFormController', function($scope){
$scope.model = {}
$scope.model.form = json
})
app.directive("traverseObject", function(){
return {
scope: {
traverseObject: '#'
},
templateUrl: 'traverseObject.tmpl.html',
link: function(scope){
scope.getTypeOf = function(value){
if(value === null) {
return "null";
}
if(Array.isArray(value)) {
return "array";
}
return typeof value;
}
scope.context = JSON.parse(scope.traverseObject)
}
}
})
app.directive("traverseArray", function(){
return {
scope: {
traverseArray: '#'
},
templateUrl: 'traverseArray.tmpl.html',
link: function(scope){
scope.getTypeOf = function(value){
if(value === null) {
return "null";
}
if(Array.isArray(value)) {
return "array";
}
return typeof value;
}
scope.context = JSON.parse(scope.traverseArray)
}
}
})