Example: List people with directive

---

examples/angular/list_people_directive.html

<script src="angular.min.js"></script>
<script src="list_people_directive.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

examples/angular/list_people_directive.js

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,
        template: '<div class="person"><div>{{person.name}}</div> <div>{{person.email}}</div></div>'
    }
});