example of click to edit directive module

clicktoedit.js

 var cms = angular.module('cms', []);
 cms.directive("clickToEdit", function() {
     var editorTemplate = $j('#editTemplate').html();
     return {
         restrict: "A",
         replace: true,
         template: editorTemplate,
         scope: {
             value: "=clickToEdit",
             idx: '@'
         },
         controller: function($scope, $http, $templateCache) {
             $scope.view = {
                 editableValue: $scope.value,
                 editableIdx: $scope.idx,
                 editorEnabled: false
             };
 
             $scope.enableEditor = function() {
                 $scope.view.editorEnabled = true;
                 $scope.view.editableValue = $scope.value;
             };
 
             $scope.disableEditor = function() {
                 $scope.view.editorEnabled = false;
             };
 
             $scope.save = function() {
                 $scope.value = $scope.view.editableValue;
                 $scope.disableEditor();
                 console.log('Saved');
             };
         }
     };
 });