Start animation via JavaScript

Hello everyone!

I'm trying to start a specific step from an animation/sequence when a certain criteria (e.g. value (from Thingworx) is 50).

I've used the code from a different post/question as a reference for a similar issue of mine (which works fine now):
https://community.ptc.com/t5/Vuforia-Studio/i-have-9-buttons-for-each-animation-and-want-to-disable-playback/td-p/625384

I've already tried to call the "playModelStep"-function (with params) from a filter, which I've added to a gauge.

The function should be called, when the value matches the criteria, but when I look at the console (in Preview), it says that the function is undefined. I've tested it with another function and it works. Now, I don't know if it is because I tested it with a function that doesn't need any params or because it doesn't use any e.g. $scope.params.

Edit: It doesn't work anymore (idk why...)

I've also tried to call the "playModelStep"-function, with either a $scope.$watch(DataChange event) or a $scope.$on(DataChange event), but then I get this "message"...

here's my code:

// variables
$scope.counter = 0;
$scope.buttonStatus = false

// Button Visibility functions
{
 $scope.instBtnVis = function() {
 // if visible param is checked then the value = null (not true nor false)
 if($scope.app.params.switchInstBtnVis == null) {
 $scope.app.params.switchInstBtnVis = false;
 }
 else {
 $scope.app.params.switchInstBtnVis = !$scope.app.params.switchInstBtnVis;
 }
 }
}

// reset/hide Instructions
{
 $scope.resetInstWdgs = function() {
 $scope.counter = 0;
 $scope.app.params.resource = "app/resources/Uploaded/blank.png";
 $scope.setWidgetProp('btn_nextInst', 'visible', false);
 $scope.setWidgetProp('btn_prevInst', 'visible', false);
 $scope.setWidgetProp('btn_rerunInst', 'visible', false);
 $scope.app.params.switchInstCloseBtnVis = false;
 }
}


//-------------------------------------------

$scope.unloadInst = function() {
 $scope.$applyAsync(() => {
 if(parseInt($scope.counter) == 1) {
 $scope.app.params.resource = "app/resources/Uploaded/blank.png";
 }
 });
}

$scope.$on('stepstarted', function(evt, arg1, arg2, arg3) {
 $scope.buttonStatus = true;
 $scope.setWidgetProp('btn_nextInst', 'visible', false);
 $scope.setWidgetProp('btn_prevInst', 'visible', false);
 $scope.setWidgetProp('btn_rerunInst', 'visible', false);
 $scope.app.params.switchInstCloseBtnVis = false;
});

$scope.$on('stepcompleted', function(evt, arg1, arg2, arg3) {
 $scope.buttonStatus = false;
 
 if(parseInt($scope.counter) == 5) {
 $scope.setWidgetProp('btn_prevInst', 'visible', true);
 $scope.setWidgetProp('btn_rerunInst', 'visible', true);
 $scope.app.params.switchInstCloseBtnVis = true;
 }
 else if(parseInt($scope.counter) == 1) {
 $scope.setWidgetProp('btn_nextInst', 'visible', true);
 $scope.setWidgetProp('btn_rerunInst', 'visible', true);
 $scope.app.params.switchInstCloseBtnVis = true;
 }
 else if(parseInt($scope.counter) != 0) {
 // not possible outside of this else if, because when a function finishes it also counts as "stepcompleted"
 
 $scope.setWidgetProp('btn_nextInst', 'visible', true);
 $scope.setWidgetProp('btn_prevInst', 'visible', true);
 $scope.setWidgetProp('btn_rerunInst', 'visible', true);
 $scope.app.params.switchInstCloseBtnVis = true;
 }
});

$scope.rerunInst = function() {
 if(!$scope.buttonStatus) {
 $scope.playModelStep("Abbildung 1", "instructions_animation", $scope.counter, true);
 }
}

// it will play for "app/resources/Uploaded/l-Creo 3D - Abbildung 1.pvi"
// in model widget "instructions_animation"
// the step number 1 - 4

$scope.nextInst = function() {
 
 // because of "Anleitung" Button
 $scope.unloadInst();
 
 if(!$scope.buttonStatus) {
 // will play only if $scope.buttonStatus == false
 
 $scope.counter++;
 $scope.playModelStep("Abbildung 1", "instructions_animation", $scope.counter, true);
 } 
}

$scope.prevInst = function() {
 
 $scope.unloadInst();
 
 if(!$scope.buttonStatus) {
 $scope.counter--;
 $scope.playModelStep("Abbildung 1", "instructions_animation", $scope.counter, true);
 } 
}

//----------------------------
$scope.playModelStep = function (sequence, modelName, step_number, play) {
 // sequence - sequence name e.g. TestFigure1 - as shown in UI
 // modelName - model name e.g. model-1
 // step_number - set this number to current step
 // play - true/false execute play for the model

 $timeout(function() {
 
 $scope.$applyAsync(() => {
 $scope.setWidgetProp(modelName, 'sequence', 'app/resources/Uploaded/l-Creo 3D - ' + sequence + '.pvi');
 });
 }, 50);

 $timeout(function() {
 
 $scope.$applyAsync(() => {
 $scope.setWidgetProp(modelName, 'currentStep', parseInt(step_number));
 });

 if(play) {
 // check if play should be applied
 
 $scope.app.params.resource = "app/resources/Uploaded/instruction" + (step_number-1) + ".jpg";
 $timeout(function() {
 angular.element(document.getElementById(modelName)).scope().play();
 }, 100);
 }
 
 }, 500);
};

$scope.test = function() {
 console.log("works");
}

//-----------------------------------------
/*$scope.$watch("app.mdl['SubscribeTest'].events['DataChange.A1D']['eventData']", function() {
 var eventData = $scope.app.mdl['SubscribeTest'].events['DataChange.A1D']['eventData'];
 if(eventData == 50 && !$scope.buttonStatus) {
 $scope.app.playModelStep("Abbildung 1", "instructions_animation", 3, true);
 }
 console.log("works");
});*/

$scope.$on('app.mdl["SubscribeTest"].events["DataChange.A1D"]', function() {
 var val = $scope.app.mdl["SubscribeTest"].events["DataChange.A1D"]["eventData"];
 if (val == 50 && !$scope.buttonStatus) {
 $scope.playModelStep("Abbildung 1", "instructions_animation", 3, true);
 }
 console.log("works");
});

SubscribeTest -> thing
A1D -> thing-property (auto-refresh is activated)

Software:
ThingWorx 9.6.1-b253
Vuforia Studio 9.25.6 (9.25.6.0)

I would really appreciate some help.