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>
    <add-summernote  id="append" class="btn bg-blue full-width" style="margin-top: 15px;"></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 {
            restrict:'E',
            replace:true,
            template: '<input  type="submit"  value="Add 1+ Editor" ng-click="addEditor()">',
            link: function (scope, element, attrs) {
              scope.addEditor = 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!");
    }
})