JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp">
    <div ng-controller="testCtrl">
        <h2>Without 'fieldset' directive</h2>
        <p>The 'Changed Name' field changes as the 'Name' is changed.</p>
        <p>Name: <input ng-model="name" ng-change="nameChanged()" placeholder="Type name here" /></p>
        <p>Changed Name: {{ changedName }}</p>
    </div>    
    <br />            
    <div ng-controller="testCtrl">
        <h2>With 'fieldset' directive</h2>
        <p>
            With the transcluded directive 'wrapping' the content,
            the 'Changed Name' field <em>does not</em> change as 
            the 'Name' is changed.
        </p>
        <xyz-field-set>
            <p>Name: <input ng-model="name" ng-change="nameChanged()" placeholder="Type name here" /></p>
            <p>Changed Name: {{ changedName }}</p>
         </xyz-field-set>
    </div>    
</div>

JavaScript

(function () {
   angular.module('testApp', [])
   .directive('xyzFieldSet', function () {
       return {
         template: '<fieldset ng-transclude></fieldset>',
         restrict: 'E',
         transclude: true
       };
   })
   .controller('testCtrl', ['$scope', function($scope) {
       $scope.name = '';
       $scope.changedName = '';
       
       $scope.nameChanged = function() {
         $scope.changedName = $scope.name;  
       };
   }]);
}());