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', []);
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]"}}</div>'
            + '</div>'
            + '</li></ul>';
        var newElement = angular.element(template);
        $compile(newElement)(scope);
        element.replaceWith(newElement); 
    }
  };
});