AngularJS with shared scope

<!doctype html>
<html lang="en">
<head>
    <script src="angular.js"></script>
    <script>
        'use strict';

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

        testApp.factory('Data', function () {
            return {'foo': ['string', 'Hello Foo'], 'bar_greeting': ['Greeting', 'Hello Bar']};
        });

        testApp.controller('dataViewCtrl', function ($scope, Data) {
            $scope.data = Data;
        });

        testApp.controller('dataEditorCtrl', function ($scope, Data) {
            $scope.data = Data;

            $scope.validation = {};
            $scope.$watch('data', function (newValue, oldValue) {
                var sync = true;
                for (var key in newValue) {
                    var value = newValue[key];
                    if (value[0] == 'string') {
                        $scope.validation[key] = true;
                    } else if (value[0] == 'Greeting') {
                        $scope.validation[key] = value[1].indexOf('Hello') == 0;
                        console.log($scope.validation[key], sync);
                        sync = sync && $scope.validation[key];
                    } else {
                        console.log('error');
                    }
                }
            });
        });

    </script>
</head>
<body ng-app="testApp">


<h2>The Editor</h2>

<div ng-controller="dataEditorCtrl">
    <table>
        <tr ng-repeat="(key, value) in data">
            <td>{{ key }}</td>
            <td><input ng-model="value[1]"></td>
            <td ng-if="validation[key]">ok</td>
            <td ng-if="!validation[key]">NOK {{ !validation[key] }}</td>
        </tr>
    </table>
</div>


<h2>Some View</h2>

<div ng-controller="dataViewCtrl">
    <table>
        <tr ng-repeat="(key, value) in data">
            <td>{{ key }}</td>
            <td>{{ value[1] }}</td>
        </tr>
    </table>
</div>

</body>
</html>