Untitled

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

  <head>
    <script data-require="angular-ui-router@*" data-semver="0.2.15" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl as vm">
    <div class="container">
      <h3>This is a main container</h3>
      <div class="grid-list">
        <h4>This is listing grid</h4>
        <table>
          <tr ng-repeat="item in vm.list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
              <input ng-model="item.age" ng-click="vm.updateAge(item)" ng-change="vm.updateAge(item)" />
            </td>
          </tr>
        </table>
      </div>
      
      <div class="mydir-place">
        <testdir directivevalue="vm.fordirective">Loading..</testdir>
      </div>
    </div>
  </body>

</html>

// Code goes here


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

myApp.controller('mainCtrl', function(){
  var vm = this;
  
  vm.fordirective = '';
  vm.index;
  
  vm.list = [
    {id: "1", name: 'Test 1', age: 35},
    {id: "2", name: 'Test 2', age: 36},
    {id: "3", name: 'Test 3', age: 37},
    {id: "4", name: 'Test 4', age: 38},
  ];
  vm.updateAge = function(item) {
    vm.fordirective = item;
  };
})

myApp.directive('testdir', function(){
  return {
    restrict: 'EA',
    scope: {
      directivevalue: "="
    },
    templateUrl: 'dirtemplate.html',
    link: function(scope, elem, attrs) {
      
      scope.setParentValue = function(directivevalue){
        scope.directivevalue = directivevalue;
      };
    }
  };
})

/* Styles go here */
.container {
  border: 1px solid red;
}

.grid-list {
  border: 1px solid blue;
}

.mydir-place {
  border: 1px solid green;
}

<div ng-if="directivevalue">
<p>This directive to contain value of text input and able to change the value of clicked input from this directive</p>

<input type="text" ng-model="directivevalue.age" ng-change="setParentValue(directivevalue)" />


{{directivevalue.age}}

</div>