JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html ng-app="app">
<body>
    <div ng-controller="Ctrl">
        <json-object child="json"></json-object>
        <br>{{json}}
    </div>
</body>
</html>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<!-- IE8 route change generates error on the route change. Works on all other browsers. -->
<script src="http://code.angularjs.org/1.1.2/angular.js"></script>
<style>
ul {
    margin-left: 25px;
    list-style: disc;
}

JavaScript

function Ctrl($scope) {
    $scope.json = {
        "one": 1,
        "two": 2,
        "child": {
            "hello": "string",
            "another child": {"me": "too"}
                 }
        };
};

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

// override the default input to update on blur
app.directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;
            
            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

app.directive('jsonObject', function($compile) {
  return {
    restrict: 'E',
    scope: {
      child: '='
    },
    link: function(scope, element, attributes){
        scope.getType = function(obj){
            if(angular.isObject(obj)){
                return "Object";
            }
        };
        var template = '<ul ng-repeat="(key, val) in child"><li>'
            + '{{key}}:'
            + '<div ng-switch on="getType(val)" >'
            + '  <div ng-switch-when="Object">Object - '
            + '    <json-object child="val"></json-object>'
            + '  </div>'
            + '  <div ng-switch-default>Literal - <input type="text" ng-model="child[key]" ng-model-onblur /></div>'
            + '</div>'
            + '</li></ul>';
        var newElement = angular.element(template);
        $compile(newElement)(scope);
        element.replaceWith(newElement); 
    }
  };
});