OpenLayerのMarkerイベントでAngularjsを使用する

Mapアプリ向けのjavascriptライブラリOpenLayersを使ってMapアプリを作っている。javascriptフレームワークはAngularjsを使用している。

この2つのライブラリ、フレームワークを使っているが、Dialog表示でハマってしまった。
マップにピンのようなマーカーを表示させ、マーカーがクリックされたら、Dialogを表示させたかった。

この場合は以下のようなコードになる。

イベントの設定

    var marker = new OpenLayers.Marker(lonLat, icon);
    marker.events.register('mousedown', marker, $scope.showDialog);

イベント

    $scope.showDialog = function(evt) {
        $scope.openDialog();
        $rootScope.$apply();  //これ大切！！！
        OpenLayers.Event.stop(evt);
    };

ここで大切なのは$rootScope.$apply();を呼ぶ事だ。 これによりAngularjsのdigestサイクルに制御が移り、非同期動作のDialog処理が実行される。