<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="MyController">
    <hello name="user.name" ng-repeat="user in list"></hello>
  </div>
</body>

</html>
// Code goes here
var app = angular.module('app', []);

app.controller('MyController', function($scope) {
  $scope.list = 
    [
      { name: '拓哉', age: '20' },
      { name: '剛',  age: '30' },
      { name: '一樹',  age: '25' },
      { name: '一郎',  age: '27' },
      { name: '太郎',  age: '22' },
      { name: '吾郎',  age: '36' }
    ];
});

app.directive('hello', function(){
  
  var link = function(scope, element, attr) {
    
  };
  
  return {
    restrict: 'E', // element
    replace: true,
    template: '<p> hello {{ name }} !</p>',
    link: link,
    scope: {
      name: '='
    }
  }
});
/* Styles go here */

#Angular directive sample

this is element directive sample