Фазовая платформа 3 и AngularJS обмен данными

Question

В настоящее время я пытаюсь взять игру, написанную с использованием Phaser 3 (фреймворк javascript), и поместить ее в модуль angularjs '. Я столкнулся с проблемой, потому что, когда я либо создаю директиву, либо помещаю игру в контроллер, я не могу заставить AngularJS правильно наблюдать за переменными внутри игровых классов.

Контроллер:

app.controller('gameController', ['$scope', function($scope) {

  $scope.bootScene = new MainScene();
  $scope.arenaScene = new ArenaScene();

  $scope.config = {
    width: 800,
    height: 450,
    backgroundColor: '#36A9E1',
    scene: [$scope.bootScene, $scope.arenaScene],
    parent: 'gameDiv',
    callbacks: {
      // This method is executed once all classes of the game have been created.
      // This means that this method has access to the values initialised in respective constructors
      postBoot: function (game) {
        // this value will only contain whatever was assigned in the constructor.
        $scope.gameState = $scope.arenaScene.state;
      }
    }
  }

  // This is the most important line
  // This object creates the canvas and runs the game.
  $scope.game = new Phaser.Game($scope.config);
}]);

И класс сцены, который мне нужен для доступа и контроля значений:

'use strict';
class ArenaScene extends Phaser.Scene {
  constructor() {
    super('arenaScene');
    this.states = 'someState';
    this.state = 'constructorState';
  }

  // Used by the engine
  init() {
    this.states = {START: 'start', PLAYERTURN: 'playerturn', ENEMYTURN: 'enemyturn', WON: 'won', LOST: 'lost'}
    this.halfSecondInterval = 500;
  }

  // Used by the engine
  create () {
    // Sets the game state to START - preparing initialization
    this.state = this.states.START;

    /* 

       Other logic goes here 

    */
    
    // Let player take the first turn
    this.playerTurn();
  }

  // Enables the player to interact wit the system
  // After a second of delay
  playerTurn() {
    // Creating a delay timer to drive the pace of the game
    this.time.addEvent({
      delay: this.halfSecondInterval * 2,
      callback: ()=>{
        this.state = this.states.PLAYERTURN;
        this.commsLbl.setText('What will you do? (click an icon below to attack/heal)');
      },
      loop: false
    });
  }

  // Runs a decision-based AI
  // two decisions based on an RNG
  enemyTurn() {
    // Generating a number between 1 - 100
    var action = Math.random() * (100 - 1) + 1;
    // Holding a variable for the outcome text
    var actionTxt = null;
    var isDead = false;
    // Healing has 30% chance to take place while attack 70%
    if (action >= 31) {
      isDead = this.player.takeDamage(this.enemy.damage);
      console.log(actionTxt = 'Enemy strike successful!');
    } else {
      this.enemy.heal(Math.random() * (10 - 4) + 4);
      console.log(actionTxt = 'Enemy healed!');
    }

    // Creating a delay timer to drive the pace of the game
    this.time.addEvent({
      delay: this.halfSecondInterval * 4,
      callback: ()=>{
        // Informing the player of the enemy action
        this.commsLbl.setText(actionTxt);

        // If the player died, end battle, else switch to PLAYERTURN
        if (isDead == true){
          this.state = this.states.LOST;
          this.endBattle();
        } else {
          this.state = this.states.PLAYERTURN;
          this.playerTurn();
        }
      },
      loop: false
    });
  }

  getGameState() {
    return this.state;
  }

  // Finishes the battle
  endBattle() {
    console.log('BattleDone!');
    if (this.state === this.states.WON) {
      this.commsLbl.setText('You WON!');
    } else if (this.state = this.states.LOST) {
      this.commsLbl.setText('You LOST!');
    }
  }
}

Я хотел бы попросить не только помощи в решении этой проблемы, но и любые советы, которые помогут мне при разработке игр с использованием фазера и их использовании с AngularJS.

Спасибо за все ответы и вклады.