Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<div ng-controller="MyCtrl">

    <form name="myForm">
       
        <p ng-repeat="field in formFields">
                <input
                    dynamic-name="field.name"
                    type="{{ field.type }}"
                    placeholder="{{ field.name }}"
                    ng-model="field.value"
                    required
                >
        </p>
        
        <code class="ie">
            myForm.firstName.$valid = {{ myForm.firstName.$valid }}
        </code>    
            
        <code class="ie">
            myForm.email.$valid = {{ myForm.email.$valid }}
        </code>            
            
        <code class="ie">
            myForm.$valid = {{ myForm.$valid }}
        </code>
        
        <hr>               
             
    </form>
    
</div>

CSS

.ie { display: block; margin: 0 0 20px; }

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.formFields = [
        {
            name: 'firstName',
            type: 'text'
        },
        {
            name: 'email',
            type: 'email'
        }
    ];
}

myApp.directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    };
});