Chapter 1: Building a simple element directive

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<!-- specify root element of application -->
<div ng-app="myApp">
    <!-- register 'my-template.html' with $templateCache -->
   <script type="text/ng-template" id="my-template.html">
   
    <div ng-repeat="num in [1,2,3,4,5]"> {{num}}</div>
   </script>
 
    
    
    <!-- your custom element -->
    <my-directive></my-directive>
    <div my-directive>
    
    </div>
</div>

JavaScript

// application module definition
angular.module('myApp', [])
.directive('myDirective', function() {
    // return the directive definition object
    return {
        // only match this directive to element tags
        restrict: 'A',
        // insert the template matching 'my-template.html'
        templateUrl: 'my-template.html'
    };
});