JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
 <name attr1="Sudarshan"  attr2="[email protected]"></name>
</div>

JavaScript

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

app.directive("name", function(){
    
    return {
        restrict: "E",
        link:function(scope,e,a){
            scope.att1=a.attr1;
            scope.att2=a.attr2;
         },
       template: 
            ["<div>attr1 : {{att1}}</div>",
            "<div>attr2 : {{att2}}</div>",
            "attr1 : <input type='text' ng-model='att1' /><br/>",
            "attr2 : <input type='email' ng-model='att2' /><br/>"].join(""),
 };
});