var app = angular.module('plunker', ['ngRoute', 'ngAnimate']);

app.directive('myDirective', function(){
    return {
        controller: function($scope, $http) {

            $scope.testBind = 'test text';

        },
    }; 
});

app.directive('myDir2', function(){
    return {
        scope: {
          testBind: '='
        },
       
        
        template:`
          <h2>Inner directive</h2>
          output data: {{testBind}} <br>`,


    }; 
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular-animate.min.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
  

  
<div my-directive>
    <h1>Outer directive</h1>
    
    output directive data: <br>
    <input type="text" ng-model="testBind">

    <hr>
    
    <div my-dir2 testBind="testBind"></div>
    

</div>
  
  
  
  </body>
</html>
/* Put your css in here */