Untitled

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body >
    <div ng-controller="mainController as vm">
        <div>
            <h1>Fail One-way Binding</h1>
            <h3 style="color:red;">Original Value: {{vm.complexObj.item1}}</h3>
            <onewaybindingfail object="vm.complexObj" field="item1" value="everything is changed" callback="vm.onCallback(obj)"></onewaybindingfail>
            <h3>Callback obj: {{vm.callbackObj}}</h3>
        </div>

        <div>
            <h1>One-way Binding is Ok</h1>
            <h3 style="color:green;">Original Value: {{vm.complexObj1.item1}}</h3>
            <onewaybinding object="vm.complexObj1" field="item1" value="one-way binding is ok" callback="vm.onOkCallback(obj)"></onewaybinding>
            <h3>Callback obj: {{vm.okCallbackObj}}</h3>
        </div>
    </div>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="script.js"></script>
     <script src="sayComponent.js"></script>
  </body>
</html>

angular.module('app', []);
angular.module('app').controller('mainController', controller);

function controller() {
    var vm = this;
    vm.complexObj = { item1: 'old value 1', item2: 'old value 2' };
    vm.complexObj1 = { item1: 'old value 1', item2: 'old value 2' };
    vm.onCallback = function (obj) {
        vm.callbackObj = obj.item1;
    }

    vm.onOkCallback = function (obj) {
        vm.okCallbackObj = obj.item1;
    }
}

/* Styles go here */

angular.module('app').component('onewaybindingfail', {
    bindings: { value:'@', field:'@', object: '<', callback: '&' },
    controller: function () {
        var ctrl = this;
        ctrl.object[ctrl.field] = ctrl.value;
        this.callback({ obj: ctrl.object });
    },
    template: '<h3>Component change value to:{{$ctrl.object[$ctrl.field]}}</h3>'

});


angular.module('app').component('onewaybinding', {
    bindings: { value: '@', field: '@', object: '<', callback: '&' },
    controller: function () {
        var ctrl = this;
        ctrl.copy = {};
        angular.copy(ctrl.object, ctrl.copy);
        ctrl.copy[ctrl.field] = ctrl.value;
        this.callback({ obj: ctrl.copy });
    },
    template: '<h3>Component change value to:{{$ctrl.copy[$ctrl.field]}}</h3>'

});