angular-summernote demo

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://hackerwins.github.io/summernote/summernote-dist/summernote.css">
<script src="http://hackerwins.github.io/summernote/summernote-dist/summernote.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://labs.sideeffect.kr/2014/angular-summernote/v0.1.1/dist/angular-summernote.min.js"></script>
<div class="" ng-controller="OptCtrl">
<div class="summernote-container">
    <div class="summernotes">
        <summernote config="options"></summernote>
    </div>
    <input class="btn bg-blue full-width" type="submit" id="append" style="margin-top: 15px;" value="Add 1+ Editor" add-summernote>
</div>
    </div>

CSS

body {
    margin: 10px 20px 50px 20px;
}

JavaScript

angular.module('summernoteDemo', ['summernote'])
    .directive('addSummernote', function ($compile) {
        var template = '<summernote config="options" on-image-upload="imageUpload(files, editor, welEditable);"></summernote>';
    return function (scope, element, attrs) {
        element.click(function () {
            var elm = angular.element(template);
            element.parent().find(".summernotes").append(elm);
            $compile(elm)(scope);            
        })
    }
})
.controller('OptCtrl', function ($scope) {
    
    $scope.options = {
        height: 150,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']]
        ]
    };

    $scope.add_editor = function () {
        console.log("Adding editor!");
    }
})