JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.min.js"></script>
<div ng-app="test">
  <parent></parent>
</div>

JavaScript

var test1 = angular.module("test", []);

test1.directive("child", function() {
    return {
      restrict: "E",
      template: "<div>{{message1}}</div>",
      link: function(scope) {
        scope.message1 = "i m child of " + scope.name;
      }
    }
  });

test1.directive("parent", function() {
    return {
      restrict: "E",
      template: "<div style='color:red'>{{message}}{{name}}" + "<child></child>" + "   </div>",
      link: function(scope, ctrl) {
        //scope.name = ctrl.name;
        alert(scope.name);
        scope.message = "hi i am parent ";
      },
      controller: function($scope) {
        this.name = "aditya";
          $scope.name = "scope Adi"
      }
    }
  });