How to get value from ACE- Angular editor

Question

I'm having problems getting the results of the Ace code editor from what I type in the code editor.

As you can see, I configured my controller with all the features and options. The only thing that doesn't work is rendering the results from the editor. Thanks in advance.

app.controller('AceCtrl', function ($scope) { $scope.modes = ['CoffeeScript']; $scope.mode = $scope.modes[0]; $scope.aceOption = { mode: $scope.mode.toLowerCase(), onLoad: function (editor) { // defaults editor.setTheme("ace/theme/monokai"); // options editor.setOptions({ showGutter: true, showPrintMargin: false, }); $scope.modeChanged = function () { editor.getSession().setMode("ace/mode/" + $scope.mode.toLowerCase()); }; } }; //Runs every time the value of the editor is changed $scope.aceChanged = function(_editor){ console.log('Ace editor changed'); // Get Current Value var currentValue = _editor.getSession().getValue(); // Set value _editor.getSession().setValue('This text is now in the editor'); }; }); <div class="wrapper" ng-controller="AceCtrl"> <section > <select ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()" autofocus="0"></select> <div ui-ace="aceOption" ng-model="aceModel" class="ace_editor"></div> </section> <div ng-change="aceChanged" style="border:1px solid red; position:relative; width:50%; height:300px; float:right;"></div> </div> 

Answer 1

If you want to do this in the onChange ui-ace handler, you can get the document from the editor session and get its value:

 editor.getSession().getDocument().getValue(); 

Link: http://ajaxorg.imtqy.com/ace/#nav=api&api=document

Code example:

 <div ui-ace="{ onLoad: aceLoaded, onChange: aceChanged }"></div> <textarea id="ace_document"> {{aceDocumentValue}} </textarea> $scope.aceLoaded = function(_editor) { $scope.aceSession = _editor.getSession(); }; $scope.aceChanged = function () { $scope.aceDocumentValue = $scope.aceSession.getDocument().getValue(); }; 

Working example on Plunker: http://plnkr.co/edit/9swlVY9JnIfOnbOAfXui?p=preview

But the easiest way is to assign a region value and use the ng model for the directive element:

Controller:

 angular.module('app').controller('rootController', [ '$scope', function ($scope) { $scope.aceValue = 'Foobar'; } ]); 

Template:

 <div ui-ace ng-model="aceValue"></div> <textarea id="ace_document" ng-model="aceValue"></textarea> 

Working example on Plunker: http://plnkr.co/edit/fbtzYDEqIQEwB6Ascm3s?p=preview