How do I call .then after .callMethod returns in Dart?

Question

I am trying to load a .czml file into a Cesium map using Dart. The javascript code works correctly and looks like this

    var viewer = new Cesium.Viewer('cesiumContainer');
    viewer.extend(Cesium.viewerDynamicObjectMixin);
    viewer.dataSources.removeAll();

    var czmlDataSource = new Cesium.CzmlDataSource();

    czmlDataSource.loadUrl('Vehicle.czml').then(function() {
        viewer.dataSources.add(czmlDataSource);
    });

This is the code converted to Dart that I am trying to use.

    void drawCzmlStream() {    
        _viewer.callMethod('extend', [context['Cesium']['viewerDynamicObjectMixin']]);
        _viewer['dataSources'].callMethod('removeAll');

        var czmlDataSource = new JsObject(context['Cesium']['CzmlDataSource']);

        czmlDataSource.callMethod('loadUrl', ['Vehicle.czml']).then(displaySource(czmlDataSource));

        print("finished");
    }

    void displaySource(dataSource) {
        _viewer['dataSources'].callMethod('add', [dataSource]);
        print("finished displaying");
    }

The code seems to execute correctly, the data in the czml file is loaded and drawn on the map, and the "finished displaying" is printed. There are however, errors after the print statement, and the second "finished" is never displayed. I suspect it has something to do with how I am using the .then call. I am using AngularDart as well with a CesiumController that calls drawCzmlStream().

This is the console display:

finished displaying

Undefined function drawCzmlStream

STACKTRACE:
#0      DynamicClosureMap.lookupFunction.<anonymous closure> (package:angular/core/parser/parser_dynamic.dart:51:11)
#1      CallMember.eval (package:angular/core/parser/eval_calls.dart:51:25)
#2      DynamicExpression.eval (package:angular/core/parser/dynamic_parser.dart:53:30)
#3      DynamicExpression.eval (package:angular/core/parser/dynamic_parser.dart:54:7)
#4      BoundExpression.call (package:angular/core/parser/syntax.dart:59:36)
#5      NgEvent.initListener.<anonymous closure> (package:angular/directive/ng_events.dart:154:39)
#6      _rootRunUnary (dart:async/zone.dart:734)
#7      _rootRunUnary (dart:async/zone.dart:735)
#8      _rootRunUnary (dart:async/zone.dart:735)
#9      _ZoneDelegate.runUnary (dart:async/zone.dart:462)
#10     _onRunUnary.<anonymous closure> (package:angular/core/zone.dart:114:63)
#11     VmTurnZone._onRunBase (package:angular/core/zone.dart:98:16)
#12     _onRunUnary (package:angular/core/zone.dart:114:17)
#13     _ZoneDelegate.runUnary (dart:async/zone.dart:462)
#14     _CustomizedZone.runUnary (dart:async/zone.dart:667)
#15     _BaseZone.runUnaryGuarded (dart:async/zone.dart:582)
#16     _BaseZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:608)

Answer 1

Thank you Benjamin, your suggestion was correct. Here is the final dart code.

  void drawCzmlStream() {    
      _viewer.callMethod('extend', [context['Cesium']['viewerDynamicObjectMixin']]);
      _viewer['dataSources'].callMethod('removeAll');

      var czmlDataSource = new JsObject(context['Cesium']['CzmlDataSource']);
      var loaded = czmlDataSource.callMethod('loadUrl', ['../czml/Vehicle.czml']);
      loaded.callMethod('then', [(_) => displaySource(czmlDataSource)]);

      print("finished");
  }

  void displaySource(dataSource) {
    _viewer['dataSources'].callMethod('add', [dataSource]);
    print("finished displaying");
  }