JSFiddle - React, Tailwind, and code Playground

HTML

<div class="control-group" ng-class="{error:!isValid}">
    <label class="control-label" for="{{name}}">{{label}}</label>
    <div class="controls">
      <input name="{{name}}" ng-model="model">
      <span class="help-inline" ng-hide='isValid'>Invalid Email</span>
    </div>
  </div>

JavaScript

app.controller('myInputCtrl', function($scope, $element, $attrs,$log) {

});

var myInputLink = function(scope, element, attrs, $compile) {
  scope.name = attrs.name;
  scope.label = attrs.label;
  
  console.debug(scope.form); 
  console.debug(scope.form.Email);
};

app.directive('myInput', function() {
  return {
    templateUrl: 'views/templates/my-input.html',
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      model: '=ngModel',
      form: '=',
      required: '=',
      definition: '='
    },
    link: myInputLink,
    controller: 'myInputCtrl'
  };
});