Create Custom Directive

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <body ng:app="app6" >
        <div ng-controller="xCon">
            <div my-customer></div>
        </div>
    </body>

    <script>
        angular.module('app6', [])
        .controller('xCon', ['$scope', function($scope) {
          $scope.customer = {
            name: 'Naomi',
            address: '1600 Amphitheatre'
          };
        }])
        .directive('myCustomer', function() {
          return {
            templateUrl: 'my-customer.html' // template terpisah
          };
        });
    </script>

</html>

//Lalu buat file ini my-customer.html:

Name: {{customer.name}} Address: {{customer.address}}