Click anywhere on body to perform a function: directive
<p>I have created a directive, which will enable a user to click on a word
to edit it in a text box and then whenever and wherever on body is clicked it should get back to the edited word.</p>

<p><strong>html</strong></p>

<pre><code> &lt;div markdown&gt;bineesh&lt;/div&gt;
</code></pre>

<p><strong>JS Directive</strong></p>

<pre><code>app.directive('markdown',function () {

/*var htmlText='&lt;textarea cols="20" rows="10" ng-show="isEditMode" ng-dblclick="previewSwitch()" ng-model="markdown"&gt;&lt;/textarea&gt;';*/
var htmlText='&lt;input type="text" class="form-control" ng-hide="isEditMode" ng-dblclick="backToTextarea()" ng-model="markdown"/&gt;';
var newHtml='&lt;div ng-click="previewSwitch()" ng-show="isEditMode" &gt;{{markdown}}&lt;/div&gt;'
var dir={
    restrict:'A',
    compile:function (tElement,tAttrs,transclude) {
        var markdown=tElement.text();

        tElement.html(htmlText);
        tElement.append(newHtml);

        return function (scope,element,attrs) {
            scope.isEditMode=true;
            scope.markdown=markdown;

            scope.previewSwitch=function () {
                scope.isEditMode=false;
            }
            scope.backToTextarea=function () {
                scope.isEditMode=true;
            }
        };


     }
   }
  return dir;
});
</code></pre>

<p>I know that something needs to be added in the directive, but I am not getting into it properly, as I am new to Angular</p>