Angular: transclude example 1.3

http://angularjs.org/

HTML

<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-messages.js"></script>
<script>
    var app = angular.module('myApp', ['ngMaterial','ngMessages']);

    app.controller('Ctrl', function($scope){
    });
</script>
<div ng-app="myApp">
<div ng-controller="Ctrl" layout="column" md-theme="green">
  <md-toolbar class="md-primary">
    <h1 class="md-toolbar-tools">
      Top Secret Project
    </h1>
  </md-toolbar>
   <span layout="row"><hr flex/><hr flex/></span>
 <md-button class="md-raised">
             
              </md-button>  <md-content class="md-padding">
    <form name="projectForm">
      <md-input-container>
        <label>Description</label>
        <input md-maxlength="30" required name="description" ng-model="project.description">
        <div ng-messages="projectForm.description.$error">
          <div ng-message="required">This is required.</div>
          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>Client Name</label>
        <input required name="clientName" ng-model="project.clientName">
        <div ng-messages="projectForm.clientName.$error">
          <div ng-message="required">This is required.</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>Hourly Rate (USD)</label>
        <input required...

CSS

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v0.6.1
 */
md-backdrop.md-opaque.md-green-theme {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute; }

md-bottom-sheet.md-green-theme {
  background-color: #fafafa;
  border-top-color: #bdbdbd; }
  md-bottom-sheet.md-green-theme.md-list md-item {
    color: rgba(0, 0, 0, 0.54); }
  md-bottom-sheet.md-green-theme .md-subheader {
    background-color: #fafafa; }
  md-bottom-sheet.md-green-theme .md-subheader {
    color: rgba(0, 0, 0, 0.54); }

.md-button.md-green-theme {
  border-radius: 3px; }
  .md-button.md-green-theme:not([disabled]):hover, .md-button.md-green-theme:not([disabled]):focus {
    background-color: rgba(158, 158, 158, 0.2); }
  .md-button.md-green-theme.md-fab {
    border-radius: 50%; }
  .md-button.md-green-theme.md-primary {
    color: #66bb6a;
    fill: #66bb6a; }
  .md-button.md-green-theme.md-warn {
    color: #ef5350;
    fill: #ef5350; }
  .md-button.md-green-theme.md-raised, .md-button.md-green-theme.md-fab {
    background-color: rgba(158, 158, 158, 0.185); }
    .md-button.md-green-theme.md-raised:not([disabled]):hover, .md-button.md-green-theme.md-raised:not([disabled]):focus, .md-button.md-green-theme.md-fab:not([disabled]):hover, .md-button.md-green-theme.md-fab:not([disabled]):focus {
      background-color: rgba(158, 158, 158, 0.3); }
    .md-button.md-green-theme.md-raised.md-primary, .md-button.md-green-theme.md-fab.md-primary {
      color: white;
      background-color: #4caf50; }
      .md-button.md-green-theme.md-raised.md-primary:not([disabled]):hover, .md-button.md-green-theme.md-raised.md-primary:not([disabled]):focus, .md-button.md-green-theme.md-fab.md-primary:not([disabled]):hover, .md-button.md-green-theme.md-fab.md-primary:not([disabled]):focus {
        background-color: #43a047; }
    .md-button.md-green-theme.md-raised.md-warn, .md-button.md-green-theme.md-fab.md-warn {
      color: white;
      background-color:...