var testApp = angular.module("testApp", []);

    testApp.controller("empController", function ($scope) {
        $scope.message = "Welcome to code-view.com";
    });
    testApp.directive("codeViewDirective", function () {
        return {
            template: "created custome directive here!"
        };
    });
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <h1>Creating a Directive</h1>
    <h3>AngularJs has lots of build-in directive but also provide facilicty to create own directive inside the module as below</h3>
   <div ng-app="testApp" ng-controller="empController">
     <div>
        {{message}}
    </div>
    <div code-view-directive></div>
    
</div>
  </body>

</html>
/* Put your css in here */