PagedownBootstrap for AngularJS (directive)

directive.js

/*
 *usage: <textarea ui:pagedown-bootstrap ng:model="box.content"></textarea>
 */
myApp.directive('uiPagedownBootstrap', function() {
    var nextId = 0;
    return {
        require: 'ngModel',
        replace:true,
        template:'<div class="pagedown-bootstrap-editor"></div>',
        link:function (scope, iElement, iAttrs, ngModel) {
                    
            var editorUniqueId = nextId++;
            iElement.html($('<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>'));
            
            var converter = new Markdown.Converter();
            
            var help = function () {
                // 2DO: add nice modal dialog
                alert("Do you need help?");
            }
            
            var editor = new Markdown.Editor(converter, "-"+editorUniqueId, {
                handler: help
            });
            
            editor.run();
                    
                    
            // local -> parent scope change (model)
            $("#wmd-input-"+editorUniqueId).on('change',function(){
                var rawContent = $(this).val();
                ngModel.$setViewValue(rawContent);
                scope.$apply();
            });
            
            // parent scope -> local change
            scope.modelValue = function() {
                console.log('modelvalue - ',ngModel.$viewValue);
                return ngModel.$viewValue;
            };
        }
    }
});