How come Ace editor won't work correctly in my Meteor/Angular application?

Question

I've created an example Meteor application which integrates with AngularJS and embeds the Ace editor via the UI.Ace Angular directive. However, although the editor shows up, it doesn't accept input. In Chromium/Chrome it's only after I open or close Developer Tools that the editor reacts and becomes responsive to input (the editor must react to some change in the browser's state AFAICT).

Basically, how do I fix my app so that the Ace component works and accepts input? Full source code for my app is available at github .

Code

HTML

angular.html

<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
    <header>
        <nav id="menu" class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
            <div class="pure-u-1-5">
                <div class="pure-menu-heading">Meteor-Ace</div>
            </div>

            <ul class="pure-u-4-5">
                <li data-ng-repeat="menuItem in menuItems">
                    <a href="{{menuItem.address}}">{{menuItem.name}}</a>
                </li>
            </ul>
        </nav>
    </header>

    <article id="content">
        <div class="content-ribbon">
                <div data-ng-view></div>
        </div>
        <footer class="pure-u-1">
            Made with the excellent <a href="http://meteor.com/">Meteor</a> framework and
            <a href="http://meteor.com/">AngularJS</a>. © 2013 Arve Knudsen
        </footer>
    </article>
</div>

partials/home.html

<div class="pure-u-1-5">
    <div id="sidebar">Sidebar Content</div>
</div>

<div class="pure-u-4-5">
    <div id="editor-container">
        <h1><a href="http://ace.c9.io/">Ace</a> Editor Demo</h1>

        <div data-ui-ace></div>
    </div>
</div>

CoffeeScript

app.coffee

require(["angular", "underscore"], (angular, _) ->
  homeUrl = "/"

  app = angular.module('meteorapp', ['meteor', 'ui.ace'],
    ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
      $routeProvider.when(homeUrl, templateUrl: 'partials/home.html', controller: "MeteorCtrl")
      $routeProvider.otherwise(redirectTo: homeUrl)
      $locationProvider.html5Mode(true)
    ])

  class MenuItem
    constructor: (@name, @address) ->
      @isSelected = false

  app.controller("MeteorCtrl", ["$scope", ($scope) ->
    $scope.menuItems = [
      new MenuItem("Home", homeUrl),
    ]
  ])

  app.controller("HomeCtrl", ["$scope", ($scope) ->
    markSelected($scope, homeUrl)
  ])

  markSelected = ($scope, url) ->
    _($scope.menuItems).each((item) =>
      item.isSelected = item.address == url
    )
)

Answer 1

Problem is that editor isn't resized properly. Try updating ace version or calling editor.resize() after ui is ready.