Create two directives, one for a parent and one for a child. Communicate data from the parent to the child using isolated scope in angularJS

<div ng-app="directiveCommApp" ng-controller="DirectiveCommController">
    <parent-directive parent-data="parentData"></parent-directive>
</div>

<script>
    var app = angular.module('directiveCommApp', []);
    app.controller('DirectiveCommController', function($scope) {
        $scope.parentData = 'Data from parent';
    });

    app.directive('parentDirective', function() {
        return {
            restrict: 'E',
            scope: {
                parentData: '='
            },
            template: '<child-directive child-data="parentData"></child-directive>'
        };
    });

    app.directive('childDirective', function() {
        return {
            restrict: 'E',
            scope: {
                childData: '='
            },
            template: '<p>{{ childData }}</p>'
        };
    });
</script>