Edit in JSFiddle

angular.module('myApp', [])
    .directive('jlMarkdown', function () {
        var converter = new Showdown.converter();
        var editTemplate = '<textarea ng-show="isEditMode" ng-dblclick="switchToPreview()" rows="10" cols="10" ng-model="markdown"></textarea>';
        var previewTemplate = '<div ng-hide="isEditMode" ng-dblclick="switchToEdit()">Preview</div>';
        return{
            restrict:'E',
            scope:{},
            compile:function (tElement, tAttrs, transclude) {
                var markdown = tElement.text();

                tElement.html(editTemplate);
                var previewElement = angular.element(previewTemplate);
                tElement.append(previewElement);

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

                    scope.switchToPreview = function () {
                        var makeHtml = converter.makeHtml(scope.markdown);
                        previewElement.html(makeHtml);
                        scope.isEditMode = false;
                    }
                    scope.switchToEdit = function () {
                        scope.isEditMode = true;
                    }
                }
            }
        }
    });
<jl-markdown>
## Double click me to switch to preview mode

### The rest of this markdown is just sample text:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Fusce at ligula at purus eleifend sagittis sit amet vitae nisl.
3. Visit `http://angularjs.org` to learn more!
</jl-markdown>

              
            
          
            
              

External resources loaded into this fiddle: