Need Some Help with a Simple App

Hello

I'm trying to make a simple app that just updates the fuel level of a car.
An indicator is supposed to move from right to left, counter-clockwise to indicate the level of fuel left.

However. the app simply doesn't work whatsoever. Nothing in the app works on Beam. I've tested to see that the gauge that would appear does work outside of Beam.



The math for the movement of that indicator works fine.

Here is my code:

Code:

angular.module('beamng.apps')
.directive('fuelGauge', ['bngApi', 'StreamsManager', function (bngApi, StreamsManager) {
  return {
    template: '<canvas width="290" height="120"></canvas>',
    replace: true,
    link: function (scope, element, attrs) {
      var streamsList = ['electrics'];
      StreamsManager.add(streamsList);
      scope.$on('$destroy', function () {
        StreamsManager.remove(streamsList);
      });

      var canvas = element[0];
      var ctx = canvas.getContext('2d');

      var minAngle = 90;
      var maxAngle = 270;
      var radius = 100;

      scope.$on('streamsUpdate', function (event, streams) {

        ctx.clearRect(0, 0, 290, 120);

        var minFuel = 0;
        var maxFuel = 1;
        var fuelPerc = streams.electrics.fuel;

        ctx.restore();

        ctx.save();
        ctx.translate(145, 110);
        var rads = (90 + minAngle + (fuelPerc - minFuel) / (maxFuel - minFuel) * (maxAngle - minAngle)) * (Math.PI / 180);
        ctx.rotate(rads);
        ctx.beginPath();
        ctx.moveTo(0, -5);
        ctx.lineTo(radius - 29, -5);
        ctx.lineTo(radius - 29, 5);
        ctx.lineTo(0, 5);
        ctx.fillStyle = "RGB(200,200,200)";
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.restore();

        ctx.save();
        ctx.translate(145, 110);
        var rads = (90 + minAngle + (fuelPerc - minFuel) / (maxFuel - minFuel) * (maxAngle - minAngle)) * (Math.PI / 180);
        ctx.rotate(rads);
        ctx.beginPath();
        ctx.moveTo(radius - 29, -6);
        ctx.lineTo(radius - 4, -6);
        ctx.lineTo(radius - 4, 6);
        ctx.lineTo(radius - 29, 6);
        ctx.fillStyle = "RGB(255,21,0)";
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.restore();

        ctx.save();
        ctx.translate(145, 110);
        ctx.fillStyle = "RGB(200,200,200)";
        ctx.beginPath();
        ctx.arc(0, 0, 5, 0, 2*Math.PI);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      });
    }
  };
}]);

I've tried using both 'engineInfo' and 'electrics' streams to retrieve fuel data, none has worked (code probably breaks before it even reaches the main function).

In addition to the images, I've also provided a download for the .js file.

If someone would like to figure out what is wrong, I would be very grateful.