AngularJS Directive Nested Models

I have the following code

<my-template title="Client Profile">

    <my-section name="personalInfo" title="Personal Informations">

        <p>Please enter your personal informations</p>

        <my-field type="text" name="firstName" label="First Name">
        <my-field type="text" name="lastName" label="Last Name">

    </my-section>

    <my-section name="demographicInfo" title="Demographic Informations">

        <p>Hello {{ personalInfo.firstName }}, where are you from?</p>

        <my-field type="text" name="country" label="Country">
        <my-field type="text" name="city" label="City">

    </my-section>

    <p class="output">

        {{ personalInfo.firstName }} {{ personalInfo.firstName }} is from
        {{ demographicInfo.city }}, {{ demographicInfo.country }}.

    </p>

</my-template>

As you see there are 3 directives: myTemplate, mySection and myField. I've tried different ways to implement this but I couldn't manage to make it work. The easiest way will be to use full model names everywhere. I try to avoid this to make the syntax easier because the client will edit this templates.

Could you provide me a quick-n-dirty example on how to implement this?

Edit

I've made some progress on this but still I have to write {{ values.section.field.value }} instead of {{ section.field }}. Check it out here http://plnkr.co/edit/YKFanoJ1XE4BTgYJn1xd?p=preview

I still have several questions

1. Is it possible to use the shorter names for variables?
2. Is it possible to use variable directly inside the section without specifying the section name? (if I am in the personalInfo section I would like to be able to write {{ firstName }} instead of {{ personalInfo.firstName }})