AngularJS Directive two way binding in isolated scope not reflecting in parent scope

Question

I am trying to pass a scope array element to a directive and changing the value of that element inside the directive but when I print the values of the scope element the changes that made inside the directive is not affected in the parent scope. I created Isolated scope and provided two way binding using '=' in scope but It is not giving any change in the parent scope. Attaching the code

Index.html

<div ng-app="dr" ng-controller="testCtrl">
    <test word="word" ng-repeat="word in chat.words"></test> 
    <button ng-click="find();">
    click
    </button>
</div>

Javascript Part

var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
    $scope.chat= {words: [
      'first', 'second', 'third'
    ]};

    $scope.find = function(){
    alert(JSON.stringify($scope.chat, null, 4));
    }
});
app.directive('test', function() {
    return {
        restrict: 'EA',
        scope: {
            word: '='
        },
        template: "<input type='text' ng-model='word' />",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Most of my search returned that putting '=' in directive scope will solve the issue, But no luck with that. can anyone point what is the issue, and how can I reflect the value in parent scope.

Answer 1

You pass a string to your directive, and this string isn't referenced because its not related to your array anymore i guess you have to change your array properly

Something like the following should work:

var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
    $scope.word = 'test';
    $scope.chat= {words: [
      {'name':'first'}, {'name': 'second'}, {'name' : 'third'}
    ]};

    $scope.find = function(){
    alert(JSON.stringify($scope.chat, null, 4));
    }
});
app.directive('test', function() {
    return {
        restrict: 'EA',
        scope: {
            word: '='
        },
        template: "<input type='text' ng-model='word.name' />",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

<div ng-app="dr" ng-controller="testCtrl">
    <pre>{{chat.words}}</pre>
    <test word="word" ng-repeat="word in chat.words"></test> 
    <button ng-click="find();">
        click
    </button>
</div>