How to get the value from ACE-Angular editor - angularjs

Question

I am having problems on getting Ace code editor results from whatever I type on the code editor.
As you can see I set up my controller with all the functionalities
and options. The only thing that is not working is rendering the results from editor. Thank you 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 handler of ui-ace you could get the document from the editor's session and grab it's value:
editor.getSession().getDocument().getValue();
Reference: http://ajaxorg.github.io/ace/#nav=api&api=document
Example code:
<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 the value to scope and use ng-model on the directive's 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