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) {      	
          
          /*scope.$watch(attrs.zippy, function(newValue, oldValue){
                alert('asd');
            });
          
          attrs.$observe('deep',function(val){ alert('asd'); });*/
        scope.$watch(attrs['zippy'],
			 function (ideaNode) {		
				 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(JSON.stringify(ideaNode));				 
				 element.html(html.join(''));
				 $compile(element.contents())(scope);
			 }
		);
      }
    }
  }]);