How to create angularjs dynamic template with custom directives?

I want to create some kind of template with angularjs that uses custom directives and then according to the attributes of these directives it creates input fields, for example if you have this directive in the template :

<cms:input type='text' size='14' default='this is a text' label='Content Header' ></cms:input>

<cms:input type='textarea' size='50' default='this is a text area' label='Content Paragraph' ></cms:input>

and this is the code of the directive

 app.directive('cmsInput', function() {
  return {
    restrict: 'E',
    require: '^ngModel',
    scope: {
        default: '@default',
        name: '@name',
        size: '@size',
        type: '@type'
    },

});

i want in the main page to do a ngInclude to the template and then show the fields according to the attributes of the directive for example for the directives above it should shows : a text field with the default text this is a text and a label with the text 'Content Header' and a textfield with the attributes accordingly