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

i've created example meteor application integrates angularjs , embeds ace editor via ui.ace angular directive. however, although editor shows up, doesn't accept input. in chromium/chrome it's after open or close developer tools editor reacts , becomes responsive input (the editor must react change in browser's state afaict).

basically, how fix app ace component works , accepts input? full source code app available @ 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 excellent <a href="http://meteor.com/">meteor</a> framework ,             <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     ) ) 

problem editor isn't resized properly. try updating ace version or calling editor.resize() after ui ready.