Can't embed ACE Editor "ui-ace need ace to work" error with angular-ui-ace

Question

I'm trying to embed ACE editor elements into my AngularJS project in order to allow JSON editing feature in it. Here are all configurations/settings so far:

Bower.json

"dependencies": {
  "angular-ui-ace": "v0.2.3"
}

Module dependency

angular.module('myApp', ['ui.ace']);

ACE settings in controller

$scope.ace_options = {
  useWrapMode : false,
  showGutter: true,
  mode: 'json',
  onLoad: function() {
    console.log('onLoad fired.');
  },
  onChange: function() {
    console.log('onChange fired.');
  }
};

Html

<div id="editor" ui-ace="ace_options" ng-model="myJson" style="height: 400px"></div>

However I get always following error:

"message": "Error: ui-ace need ace to work... (o rly?)",

What I'm doing wrong or did I missed something?

Answer 1

After fetching the scripts with Bower, make sure you include them in your application. Following is the order of scripts provided in the Ace UI docs.

<script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-ace/ui-ace.js"></script>