Comment valider des champs de formulaire dynamique dans la directive angulaire?

Je voudrais créer un formulaire avec des champs créés dans la directive. La liaison des données des données fonctionnant correctement mais la validation ne fonctionne pas.

Ceci est HTML: P>

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

app.controller('MainCtrl', function($scope) {
    $scope.data = {name: '', age: ''}
    $scope.config = [
        {field: 'name', required:true},
        {field: 'age'}
    ];
});

app.directive('field', function ($compile) {
    return {
        scope: {
            data: '=',
            conf: '='
        },
        link: function linkFn(scope, element, attrs) {
            // field container
            var row = angular.element('<div></div>');

            // label
            row.append(scope.conf.field + ': ');

            // field input
            var field = angular.element('<input type="text" />');
            field.attr('name', scope.conf.field);
            field.attr('ng-model', 'data.' + scope.conf.field);
            if (scope.conf.required) {
                field.attr('required', 'required');
            }
            row.append(field);

            // validation
            if (scope.conf.required) {
                var required = angular.element('<span>required</span>');
                required.attr('ng-show', 
                    'form.' + scope.conf.field + '.$error.required');
                row.append(required);
            }

            $compile(row)(scope);
            element.append(row);
        }
    }
});