JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.3.min.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <form name="myForm">

          
          <!-- The form below works when we specify literal values -->
         <span ng-repeat="field in fields">
             <input name="field1"
                    ng-model="field.value"
                     ng-required="true"/>
             <span class="error" ng-show="myForm.field1.$error.required">Im displayed when this field is empty</span><br>
          </span>


          <!-- The form below doesnt work as we try and reference name and ng-required from the scope -->
         <span ng-repeat="field in fields2">
             <input name="{{field.name}}"
                    ng-model="field.value"
                     ng-required="{{field.required}}"/>
             <span class="error" ng-show="myForm.field2.$error.required">You will never see me :(</span><br>
          </span>
          
        </form>
      <hr>
      <tt>myForm.field1.$valid = {{myForm.field1.$valid}}</tt><br>
      <tt>myForm.field2.$error = {{myForm.field1.$error}}</tt><br>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
    </div>
  </body>
</html>

JavaScript

function Ctrl($scope) {

    
    $scope.fields = [
            {name:'field1', value: 'Delete me', required: true}  
        ]

    $scope.fields2 = [
            {name:'field2', value: 'Delete me', required: true}  
        ]
        
}