Custom Directive

http://angularjs.org/

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/ng-template" id="itemMenuTemplateUndefined">
    <div class = "panel panel-default" > <div class = "panel-heading" > {{datasource.firstName}} {{datasource.lastName}} </div>
            <div class="panel-body">
                Age: {{datasource.age}}
            </div > </div>
</script>
<script type="text/ng-template" id="itemMenuTemplateInternal">
    <!-- <div class = "panel panel-success"> <div class = "panel-heading" > {{datasource.firstName}} {{datasource.lastName}} </div>
            <div class="panel-body">
                <div>Age: {{datasource.age}}</div > <div > Internal Code: {{datasource.internalcode}} </div> -->
            <!-- </div > </div> -->
</script>
<script type="text/ng-template" id="itemMenuTemplateExternal">
    <div class = "panel panel-warning"> <div class = "panel-heading" > {{datasource.firstName}} {{datasource.lastName}} </div>
            <div class="panel-body">
                <div>Age: {{datasource.age}}</div > < div > Website: {{datasource.website}}</div>
            </div > </div>
    </div >
</script>
<div ng-controller="mainController">
    <div ng-repeat="customer in customers">
        <div item-menu datasource="customer" add="addCustomer()"></div>
    </div>
</div>

CSS

body {
    padding: 20px;
}

JavaScript

'use strict';
angular.module('myApp', [])
    .controller('mainController', function ($scope) {
    $scope.customers = [{
        'kind': 'internal',
            'firstName': 'Jim',
            'lastName': 'Thompson',
            'age': '34',
            'internalcode': 'X3434'
    }, {
        'kind': 'external',
            'firstName': 'James',
            'lastName': 'Hankerton',
            'age': '33',
            'website': 'http://google.com'
    }, {
        'kind': 'undefined',
            'firstName': 'Greg',
            'lastName': 'Garland',
            'age': '28'
    }, {
        'kind': 'external',
            'firstName': 'Eddie',
            'lastName': 'Eddington',
            'age': '33',
            'website': 'http://yahoo.com'
    }, {
        'kind': 'internal',
            'firstName': 'Rachael',
            'lastName': 'Rosters',
            'age': '34',
            'internalcode': 'X1112'
    }, {
        'kind': 'undefined',
            'firstName': 'David',
            'lastName': 'Dielan',
            'age': '37'
    }, {
        'kind': 'undefined',
            'firstName': 'Howard',
            'lastName': 'Honduras',
            'age': '45'
    }];
    $scope.numberAdded = 0;
    $scope.addCustomer = function () {
        $scope.numberAdded++;
    }
})
    .directive('itemMenu', function () {

    var controller = function ($scope) {
        var vm = this;

        function init() {
            vm.items = angular.copy($scope.datasource);
        }
        init();
        vm.addItem = function () {
            $scope.add();
            vm.items.push({
                'kind': 'undefined',
                    'firstName': 'Joe',
                    'lastName': 'Newton',
                    'age': Math.floor(Math.random() * 60) + 20
            });
        }
    };

    return {
        restrict: 'A',
        scope: {
            datasource: '=',
            add: '&'
        },
        controller: controller,
        controllerAs:...