<!DOCTYPE html>
<html ng-app="my-module">

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <p>
      <h3>No Name</h3>
      <button class="small" my-greeting>Click to greet!</button>
    </p>
    
    <hr/>
    
    <p>
      <h3>Enter Name: <input type="text" ng-model="greeterName"/></h3>
      <button class="small" my-greeting="{{greeterName}}">Click to greet!</button>
    </p>
    
  </body>

</html>
angular.module('my-module', []).directive('myGreeting', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.click(function(){
        var greetee = attrs.myGreeting || "world";
        alert("Hello, "+ greetee +"!");
      });
    }
  };
});
body {
  padding: 10px 15px;
}

input {
  width: 25%;
}