Large object leaf node changes not detected by AngularJS

Question

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).

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).

Here's a fiddle of what I'm trying to achieve: http://jsfiddle.net/tommcquarrie/N8B6y/ 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.

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:

Controller housing the object:

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
      }
  }
];
}]);

Angular view:

<div ng-app="app" class="container">
        <div ng-controller="Ctrl" class="row">
            <!-- individual object editors -->
            <div ng-repeat="object in model.objects" class="well">
                <textarea json-editor ng-model='object' style="width: 100%;" rows="10"></textarea>
            </div>

            <!-- individual object JSON output. Edits to the objects above don't show here. -->
            <div ng-repeat="object in model.objects">
            <pre>{{ object | json }}</pre>
            </div>
        </div>
    </div>

Directive:

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);
        }
    };
}]);

Answer 1

You need to have a . in the model, otherwise the model values are copied by value instead of reference into the new scope. Here is your plunker, updated.

http://jsfiddle.net/Cjsge/

            <div ng-repeat="object in model.objects" class="well">
                <textarea json-editor ng-model='object.json' style="width: 100%;" rows="10"></textarea>

Answer 2

Have you tried to use $watchCollection?

try this:

    scope.$watchCollection('objects',function(newValues, oldValues){

        // do whatever you want to do when an element changes
    });

this will work if your array goes only one level deep. If you start having nested arrays you may try this:

    scope.$watch('objects',function(newValues,oldValues){/***/},true);

Note the third argument is set to true for deep watching the object.