Angular Material

HTML

<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//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.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<div ng-app='app'>
    <div ng-controller="AppCtrl" >
      <md-content>
        <md-toolbar>
          <h2 class="md-toolbar-tools">
            <span>Toolbar</span>
          </h2>
        </md-toolbar>
        <br>
        <br>
        <md-toolbar class="md-tall md-accent">
          <h2 class="md-toolbar-tools">
            <span>Toolbar: tall (md-accent)</span>
              <md-button ng-click="openToast()">
                Open a Toast!
              </md-button>
          </h2>
        </md-toolbar>
        <br>
        <md-toolbar class="md-tall md-warn md-hue-3">
          <span flex></span>
          <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
            <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
          </h2>
        </md-toolbar>
      </md-content>
    </div>
</div>

JavaScript

var app = angular.module('app', ['ngMaterial']);

app.controller('AppCtrl', function AppCtrl($scope, $mdToast) {
    console.log('ctrl');
     $scope.openToast = function($event) {
        $mdToast.show($mdToast.simple().content('Hello!<br/> heeee'));
      };
});

app.directive('svgIcon', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<svg viewBox="0 0 24 24" style="pointer-events: none;"><g><g><rect fill="none" width="24" height="24"></rect><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></g></svg>'
  }
});