ngHandsontable dynamic data loading question

<!DOCTYPE html>
<html>

  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.22.0/handsontable.css" rel="stylesheet" data-semver="0.22.0" data-require="handsontable@*" />
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.22.0/handsontable.full.js" data-semver="0.22.0" data-require="handsontable@*"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-semver="1.5.3" data-require="angular.js@1.5.3"></script>
    <script data-require="ngHandsontable@*" data-semver="0.9.0" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.9.0/ngHandsontable.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="ngHotDemo">
    <h1>AngularJS ngHandsontable dropdown</h1>
    <div ng-controller="DemoCtrl as dctrl">
      
      <h3>Handsontable loaded with static data, works fine</h3>
      <hot-table datarows="dctrl.staticData" settings="dctrl.staticSettings">
        <hot-column type="text" title="'Id'" data="myid"></hot-column>
        <hot-column source="dctrl.staticWeather" type="'dropdown'" title="'Weather'" data="weather"></hot-column>
        <hot-column type="'autocomplete'" title="'Menu'" data="menu">
          <hot-autocomplete datarows="{{dctrl.staticMenu}}"></hot-autocomplete>
        </hot-column>
      </hot-table>
      
      <h3>Handsontable loaded via async service calls, dropdown and autocomplete menus are empty</h3>
      <hot-table datarows="dctrl.dynamicData" settings="dctrl.dynamicSettings">
        <hot-column type="text" title="'Id'" data="myid"></hot-column>
        <hot-column source="dctrl.dynamicWeather" type="'dropdown'" title="'Weather'" data="weather"></hot-column>
        <hot-column type="'autocomplete'" title="'Menu'" data="menu">
          <hot-autocomplete datarows="{{dctrl.dynamicMenu}}"></hot-autocomplete>
        </hot-column>
      </hot-table>
      
    </div>
  </body>

</html>

// ngHandsontable demo for trouble-shooting

'use strict';
angular.module('ngHotDemo', ['ngHandsontable']);

angular.module('ngHotDemo')
  .controller('DemoCtrl', ['DemoService', function(DemoService) {
    var vm = this;
    
    // Static example settings and data for the first table
    vm.staticSettings = {
      rowHeaders: false,
      colHeaders: true,
      minSpareRows: 1
    }
    vm.staticData = DemoService.staticData;
    vm.staticWeather = DemoService.staticWeather;
    vm.staticMenu = DemoService.staticMenu;

    // Dynamic example settings and data for the second table
    vm.dynamicSettings = {
      rowHeaders: false,
      colHeaders: true,
      minSpareRows: 1
    };
    vm.dynamicData = [];
    vm.dynamicWeather = [];
    vm.dynamicMenu = [].join(',');
    
    DemoService.getDynamicWeather()
      .then(function successCallback(results) {
        vm.dynamicWeather = results;
      });

    DemoService.getDynamicMenu()
      .then(function successCallback(results) {
        vm.dynamicMenu = results.join(',');
      });

    DemoService.getDynamicData()
      .then(function successCallback(results) {
        vm.dynamicData = results.data;
      });
  }]);

angular.module('ngHotDemo')
  .service('DemoService', ['$http', '$q', function($http, $q) {
    var svc = {
      
      // Data via static properties for the first example
      staticData: [
        {"myid": "1", "weather": "Cloudy", "menu": "Cheese"},
        {"myid": "2", "weather": "Sunny", "menu": "Turnips"}
      ],
      staticWeather: ['Cloudy', 'Sunny', 'Rainy'], // dropdown
      staticMenu: ['Beans', 'Cheese', 'Turnips'].join(','), // autocomplete
      
      // Data loaded async from JSON file for second example
      getDynamicData: function() {
        var def = $q.defer();
        $http.get('data.json')
          .then(function successCallback(response) {
            def.resolve(response);
          });
        return def.promise;
      },
      
      // Weather dropdown data for second example
      getDynamicWeather: function() {
        var def = $q.defer();
        $http.get('weather.json')
          .then(function successCallback(response) {
            var i, responseArray = [];
            for (i = 0; i < response.data.length; i++) {
              responseArray.push(response.data[i].weather);
            }
            def.resolve(responseArray);
          });
          return def.promise;
      },

      // Menu autocomplete data for second example
      getDynamicMenu: function() {
        var def = $q.defer();
        $http.get('menu.json')
          .then(function successCallback(response) {
            var i, responseArray = [];
            for (i = 0; i < response.data.length; i++) {
              responseArray.push(response.data[i].menu);
            }
            def.resolve(responseArray);
          });
          return def.promise;
      }
    };
    
    return svc;
  }]);

# ngHandsontable dynamic data loading question

This ngHandsontable example includes two tables. The first is
loaded via static data. The second table is loaded via JSON data
retrieved through service calls that return a promise. Each of the
tables has text, dropdown and autocomplete fields. The static data
example works fine, but I'm unable to get ngHandsontable to
recognize the lazy-loaded data sources for the dropdown and
autocomplete fields in the second example.

I'm interested to learn how to make the controls in the second
example work as expected.

[
  {"myid": "3", "weather": "Sunny", "menu": "Cheese"},
  {"myid": "4", "weather": "Rainy", "menu": "Beans"},
  {"myid": "5", "weather": "Cloudy", "menu": "Turnips"}
]

[
  {"weather": "Cloudy"}, 
  {"weather": "Sunny"},
  {"weather": "Rainy"}
]

[
  {"menu": "Beans"}, 
  {"menu": "Cheese"},
  {"menu": "Turnips"}
]