Angular with html code editor now working

I am working on code editor using angular js, here i have my code but i want the editor to load content on textarea once page load or if the content of the text is change. i have I archive it to display everything that is typed in editor inside the textarea but from text area to editor is not working

    <script>
    var app = angular.module('app', []);
    app.controller('ctrl', [
        '$scope',
        function ($scope) {
            ace.config.set('basePath', '//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/');
        }
    ]);
    app.directive('aceCodeEditor', [function () {
            return {
                link: function (scope, element, attrs) {
                    scope.editor = ace.edit(element[0]);
                    scope.editor.getSession().setMode('ace/mode/markdown');
                    scope.editor.setTheme('ace/theme/monokai');
                    scope.editor.getSession().on('change', function (e) {
                        scope.$emit('ace.editor.change');
                    });
                }
            };
        }]);



    app.directive('markdownViewer', [function () {
        return {
            link: function (scope, element, attrs) {
                scope.$on('ace.editor.change', function () {

                    var data = scope.editor.getValue();
                    var texter = document.getElementById("inputTextToSave").defaultValue;
//I have tried to do it this way but it seem not to work 
                     scope.html(texter);
                   //alert(texter);
                   //data.html = document.getElementById('inputTextToSave').defaultValue;
                   document.getElementById('inputTextToSave').value = data;



                    element.html(marked(data));
                    element.find('pre code').each(function (i, block) {
                        hljs.highlightBlock(block);
                    });
                    element.find('table').addClass('table');
                });
            }
        };
    }]);
    </script>

HTML PART

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js"></script>

 <div ace-code-editor class="ace-md"></div>
<textarea style="height:100px;width:100px;" id='inputTextToSave' markdown-viewer name='bob'>Load{Show this inside editor}</textarea>