How to implement Json with step instructions from sequence for label in Vuforia studio ?

for the one specific approach here  I want  to provide a simple example.

1. a project will start manually the playAll service ,by clicking on button which has binding to the playAll service of the modelwidget.
2. for each step number is called a json file called here properties_step_XX.json. This contains widget and properties which should be set when the step started. 
3. Syntax of the json file could be something like this  :

   {
   "label-1":{"text":"Step 7"},
   "3DLabel-1":{"visible":true,"text":"The current Step is Step 7","fontColor":"#ff6347"},
   "wayfinder-1":{"selectedWaypointIndex":7,"ribbonColor":"#ff6347"}
   } ​

    

4. I used some code as shown in the picture of the previous post  

   $scope.jsonData={}; //global $scope variable
   //===========================================================================
   gotJSON=function(data){
    try{
   $scope.jsonData=JSON.parse(data);
    console.warn( JSON.stringify($scope.jsonData))
    $scope.setMutipleProps($scope.jsonData)
    } 
   catch(wrong){ console.warn(wrong);}
   
   }
   //===========================================================================
   doRead=function (jsonFile){
   fetch(jsonFile)
    .then(response=>response.text())
    .then(data=>gotJSON(data))
   }
   
   //===========================================================================
   $scope.readDataForStepNumber=function(stepNumber) {
   let jsonFile= "app/resources/Uploaded/properties_step_"+stepNumber+".json"
   console.log("jsonFile=",jsonFile)
   doRead(jsonFile)
   }
   //============================================
   function toHex(str) { var ret = ''; 
    for (var i=0; i<str.length; i++) { ret += str.charCodeAt(i).toString(16);}return ret;}
   //===========================================================================
   //the code will read the complette JSON File and
   //assignee it to a jsonData global variable
   //func will set mutliple widget properties according JSON
   $scope.setMutipleProps = function(obj){
    Object.keys(obj).forEach(function (item) {
    for(var prop in obj[item]) {
    if((item.toString().indexOf('wayfinder') !=-1) && ( prop.toString().indexOf('selectedWaypointIndex') !=-1)) // will set the index one of 4
    { $scope.view.wdg[item][prop]= (parseInt(obj[item][prop])-1)%4; } 
    else
    $scope.view.wdg[item][prop]=obj[item][prop]; 
    $scope.$applyAsync()
    //print the setting for debugging 
   							console.log("==>$scope.view.wdg["+item+"]["+prop+"]="+$scope.view.wdg[item][prop] )
    } 
    							})
    };
   //===========================================================================
   //$scope.$on('stepcompleted', function(evt, arg1, arg2, arg3) { //not used
    $scope.$on('stepstarted', function(evt, arg1, arg2, arg3) { 
    var parsedArg3 = JSON.parse(arg3);
    
    $scope.readDataForStepNumber(parsedArg3.stepNumber)
    $scope.$applyAsync()
    }); 
   //===============

    

5. Tested in Vuforia Studio preview mode - so it set some properties for testing e.g.
6. 
7. demo project attached