AngularJS compile rendered name value in dynamic form - angularjs

Question

I'm building a form dynamically in Angular.
All works great until I get to my validation directive.
This uses the form object to get the field name and apply styling to it to show errors in invalid fields.
However because it's dynamically set the name appears as {{field.name}} not the actual name rendered in the browser.
Here is my markup
<div class="form-group" ng-repeat="field in fields">
<label class="text control-label col-sm-2" for="{{field.name}}">{{field.label}}</label>
<div class="input-group col-sm-9" ng-switch="field.type">
<input ng-switch-when="email" type="email" name="{{field.name}}" class="form-control" id="{{field.name}}" placeholder="{{field.label}}" ng-model="field.value" required>
<input ng-switch-when="text" type="text" name="{{field.name}}" class="form-control" id="{{field.name}}" placeholder="{{field.label}}" ng-model="field.value" required>
<select ng-switch-when="select" id="{{field.name}}" name="{{field.name}}" id="{{field.name}}" ui-select2="" ng-model="field.value" placeholder="{{field.label}}" required>
<option></option>
<option ng-repeat="option in field.options" value="{{option.value}}">{{option.label}}</option>
</select>
<p ng-switch-default>Need template for {{field.type}}</p>
</div>
</div>
Here's where I check for errors in my directive
// go through every field
for(var errorType in form.$error)
{
var fields = form.$error[errorType];
// loop through all fields of this type
for(var j = 0 ; j < fields.length ; j++)
{
var field = fields[j];
console.log(field);
var $field = element.find('[name='+field.$name+']');
showErrors($field, field, errorType);
}
}
And here are the properties for one of the invalid fields when logged out
...
$invalid: true
$isEmpty: function (value) {
$modelValue: ""
$name: "{{field.name}}"
$parsers: Array[1]
$pristine: true
...
So when I try to get hold of the field using var $field = element.find('[name='+field.$name+']'); it obviously doesn't work and I get a error...
unrecognized expression: [name={{field.name}}]
How would I get around this and get the rendered name. I need this directive to work for forms that aren't dynamically created either (in which case it works fine).

Answer 1

You have to use a directive:
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);
}
};
});
Here is a fiddle.
Full answer here.