How to add attributes to child element in directive

Question

I have the following plunkr:

http://plnkr.co/edit/M1uwZxZP7sXp5sPw7pxf?p=preview

What I want to do is: I'd like to build an angular code to generate inputs automatically inside a form, given a json with it's description EXAMPLE:

{'name': 'username', 'description': ['text', 'maxlength=16', 'required']}

To do so, I'm using a custom directive that appends input to the tag

<custominput></custominput>

Turns

<custominput>
   <input type='text'/>
</custominput>

and THEN I add any other validation attributes, like minlength and maxlength.

In my plunkr, I can add attributes to the custominput tag, like that:

<custominput compiled="compiled" disabled="disabled"></custominput>

But HOW can I add these attributes to the input tag (that means, the child of custominput)??

UPDATE 1

This question can be summarized to:

How can I add an HTML element/attributes with angular directives FROM a directive

EXAMPLE: Turn this

<form name="form0">
    <input custom-directive>
</form>

into this:

<form name="form0">
    <input custom-directive type="text" ng-model="ctrl.username" ng-maxlength="15" ng-required="required">
</form>

from a directive

Answer 1

You would add them in the directive's template section. See code below:

html code

<form>
    <input custom-directive>
</form>

directive code (im just writing this off the top of my head, it probably won't be a copy paste job for it to work, but it's definitely going in the right direction).

app.directive('customDirective', function() {
  return {
    restrict: 'A',
    controller: function($scope, attrService) {
      $scope.attributes = attrService.getAttrs;
    },
    link: function(scope, element, attrs) {
      element.attr('name', scope.attributes.name);
      // add more attributes
      console.log(scope.attributes) // ensure attributes is being pushed through from directive controller.
    }
  }
});

To dynamically add attributes