angulartemplate.html

<div>
    <h2>Home</h2>
    <p>{{home.message}}</p>
    <h3>Without anything</h3>
    <my-name></my-name>

    <h3>With simple string</h3>
    <my-name simplestring="simple static from angular"></my-name>

    <h3>With dynamic string</h3>
    <my-name simplestring="{{$ctrl.message}}"></my-name>
    <button ng-click="$ctrl.changeMessage()">Add period</button>

    <h3>With complex object</h3>
    <my-name id="mycomplex"></my-name>
    <button ng-click="$ctrl.modifyComplex()">Add line</button>

    <h3>With some slot content</h3>
    <my-name simplestring="{{$ctrl.message}}">
        <p>Nested componentant 'transcluded' from angular
            <span ng-bind="$ctrl.message"></span>
        </p>
    </my-name>
</div>