gistfile1.js

/*
 *usage: <textarea ui:pagedown-bootstrap ng:model="box.content"></textarea>
 */
myApp.directive('uiPagedownBootstrap', function($compile) {
    var nextId = 0;
    //Make converter only once to save a bit of load each time
    var markdownConverter = new Markdown.Converter(); 
    return {
        require: 'ngModel',
        replace:true,
        template:'<div class="pagedown-bootstrap-editor"></div>',
        link:function (scope, iElement, iAttrs, ngModel) {
                    
            var editorUniqueId = nextId++;
            
            var newElement = $compile('<div>'+
                '<div class="wmd-panel">'+
                '<div id="wmd-button-bar-'+editorUniqueId+'"></div>'+
                '<textarea class="wmd-input" id="wmd-input-'+editorUniqueId+'">{{modelValue()}}'+
                '</textarea>'+
                '</div>'+
                '<div id="wmd-preview-'+editorUniqueId+'" class="wmd-panel wmd-preview"></div>'+
                '</div>')(scope);
            
            iElement.html(newElement);
            
            var help = function () {
                // 2DO: add nice modal dialog
                alert("Do you need help?");
            }
            
            //Save this so you don't have to keep $()-ing
            var $wmdInput = $("#wmd-input-"+editorUniqueId);
            
            var editor = new Markdown.Editor(markdownConverter, "-"+editorUniqueId, {
                handler: help
            });
            
            editor.run();
                    
                    
            // local -> parent scope change (model)
            $("#wmd-input-"+editorUniqueId).on('change',function(){
                console.log('change - raw content: ',$wmdInput.val());
                var rawContent = $wmdInput.val();
                //make sure you use a function with $apply. if you just do a naked $apply(),
                //it has to re-evaluate a lot more.
                //Check http://docs.angularjs.org/api/ng.$rootScope.Scope for $apply, they explain it
                scope.$apply(function() { 
                    ngModel.$setViewValue(rawContent);
                });
            });
            
            
           scope.$watch(attrs.ngModel, function(value) {
               //change editor value here
           });            

           scope.modelValue = function() { 
               return model.$viewValue;
           };
        }
    }
});