title: Large object leaf node changes not detected by AngularJS
body: <p>I'm trying to get an example working where I have a large JSON object, and I want to enable editing the raw json source of small subsets of that object via a textarea (kind of an "advanced settings" area).</p>
  
  <p>The JSON editor is working fine when you edit the top level element $scope.objects, and follows the standard conventions for enabling directives to update their bound models,
   but when I try to output a set of editors for each sub object via ng-repeat, changes to the sub objects aren't showing in the full JSON object output (or outputs of the subsets in a second ng-repeat).</p>
  
  <p>Here's a fiddle of what I'm trying to achieve: <a href="http://jsfiddle.net/tommcquarrie/N8B6y/" rel="nofollow">http://jsfiddle.net/tommcquarrie/N8B6y/</a> You'll see in the top example, because I'm editing small subsets of the JSON data, the changes on the left don't apply to the right.  Scrolling down to the bottom example, it works, but only because I'm editing the entire object on the left and outputting the entire object on the right.</p>
  
  <p>Is there something I can do to notify 'up the chain' that a leaf node in a larger object has been updated? Below is a subset of relevant code:</p>
  
  <p>Controller housing the object:</p>
  
  <pre><code>app.controller('Ctrl', ['$scope', function($scope) {
      $scope.model = {};
      $scope.model.objects = [
    {
      "param1": "value1",
      "param2": "value2",
      "param3": "value3",
        "param4": {
            "subParam5": true,
            "subParam6" : false
        }
    },
    {
      "param1": "value1",
      "param2": "value2",
      "param3": "value3",
        "param4": {
            "subParam5": true,
            "subParam6" : false
        }
    },
    {
      "param1": "value1",
      "param2": "value2",
      "param3": "value3",
        "param4": {
            "subParam5": true,
            "subParam6" : false
        }
    },
    {
      "param1": "value1",
      "param2": "value2",
      "param3": "value3",
        "param4": {
            "subParam5": true,
            "subParam6" : false
        }
    }
  ];
  }]);
  </code></pre>
  
  <p>Angular view:</p>
  
  <pre><code>&lt;div ng-app="app" class="container"&gt;
          &lt;div ng-controller="Ctrl" class="row"&gt;
              &lt;!-- individual object editors --&gt;
              &lt;div ng-repeat="object in model.objects" class="well"&gt;
                  &lt;textarea json-editor ng-model='object' style="width: 100%;" rows="10"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
  
              &lt;!-- individual object JSON output. Edits to the objects above don't show here. --&gt;
              &lt;div ng-repeat="object in model.objects"&gt;
              &lt;pre&gt;{{ object | json }}&lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>app.directive('jsonEditor', [ '$filter', function( $filter ) {
      return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attr, ngModel) {
  
              function into(input) {
                try{
                    var parsed = JSON.parse(input);
                    return parsed;
                }
                catch( e )
                {
                    return {};
                }
            }
  
            function out(data) {
  
                try {
                    var str = $filter('json')(data);
                    return str;
                }
                catch( e )
                {
                    return '';
                }
            }
  
            ngModel.$parsers.push(into);
            ngModel.$formatters.push(out);
          }
      };
  }]);
  </code></pre>