Example: List people with directive and templateUrl

• templateUrl

<script src="angular.min.js"></script>
<script src="list_people_directive_url.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">

   <div my-person person="p" ng-repeat="p in people"></div>

</div>

<style>
  .person {
    background: #EEE;
    margin: 20px;
  }
</style

angular.module('DemoApp', []);

angular.module('DemoApp')
.controller('DemoController', ['$scope', function($scope) {
    $scope.people = [
        {
            name: 'Foo',
            email: 'foo@company.com'
        },
        {
            name: 'Bar',
            email: 'bar@company.com'
        },
        {
            name: 'Qux',
            email: 'qux@company.com'
        }
    ];

}]);

angular.module('DemoApp')
    .directive('myPerson', function () {
    return {
        scope: {
            person: '='
        },
        replace: true,
        templateUrl: 'person.html'
    }
});