Angular Edit-in-Place Directive

HTML

<div>
    <div ng-controller="ContactsCtrl">
        <ul>
            <li ng-repeat="contact in contacts">
                <div zippy="contact">a</div>
            </li>
        </ul>
        <br />
        <p>Here we repeat the contacts to ensure bindings work:</p>
        <br />
        <ul>
            <li ng-repeat="contact in contacts">{{contact.name}} : {{contact.deep}}</li>
        </ul>
    </div>
</div>

CSS

.edit-in-place span {
    cursor: pointer;
}
.edit-in-place input {
    display: none;
}
.edit-in-place.active span {
    display: none;
}
.edit-in-place.active input {
    display: inline-block;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('ContactsCtrl', function ($scope) {

    $scope.contacts = [{
        name: 'Sharon',
        deep: {
            A: "a"
        }
    }, {
        name: 'Steve',
        deep: {
            A: "b"
        }
    }, {
        name: 'Scott',
        deep: {
            A: "c"
        }
    }];

    $scope.primitiveTest = function (c) {
        c.name = c.name + c.name;
    }
    $scope.objectTest = function (c) {
        c.deep = {
            A: c.deep.A + c.deep.A
        };
    }
});



app.directive('zippy', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var html = [];
            html.push('<hr/><div class="clearfix" id="vote-icons" ng-click="primitiveTest(' + attrs['zippy'] + ');" >Update Name </div> - <div class="clearfix" id="vote-icons" ng-click="objectTest(' + attrs['zippy'] + ');">UpdateObject');
            html.push('</div>');
            html.push("{{" + attrs['zippy'] + "}}");
            element.html(html.join(''));
            $compile(element.contents())(scope);
        }
    }
}]);