JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
<div ng-controller="MainCtrl">
    <input type='file' id='fileinput'/><input type="button" ng-click='loadFile()' value="Uplaod" />
    {{ dataItems }}
    <!--Need to iterate and display the json values for each div element based on image url here -->
     <div ng-repeat="item in newArr">
         <div ng-src="{{item.value}}">
             <div id="3d{{$index}}"></div>   
            <div id="sliceX{{$index}}"></div>    
            <div id="sliceY{{$index}}"></div>    
            <div id="sliceZ{{$index}}"></div>  
             
         </div>
         
    </div>
    
    
    </div>
</div>

JavaScript

var mainApp = angular.module('myApp', []);
mainApp.controller('MainCtrl',['$scope', '$rootScope', '$location', function($scope, $rootScope, $location){
         
 	$scope.dataItems = [];   
 	$scope.loadFile = function(){
     
     var input, file, fr;
 	    	    if (typeof window.FileReader !== 'function') {
 	    	      alert("The file API isn't supported on this browser yet.");
 	    	      return;
 	    	    }

 	    	    input = document.getElementById('fileinput');
 	    	    if (!input) {
 	    	      alert("Couldn't find the fileinput element.");
 	    	    }
 	    	    else if (!input.files) {
 	    	      alert("This browser doesn't seem to support the `files` property of file inputs.");
 	    	    }
 	    	    else if (!input.files[0]) {
 	    	      alert("Please select a .json file before clicking 'Load State' button");
 	    	    }
 	    	    else {
                    file = input.files[0];
 	    	      fr = new FileReader();
                     fr.readAsText(file);
 	    	    var imagelines, newArr; 
 	    	      fr.onload = function (e){
                       $scope.imagelines = e.target.result;// it is in json: [{"name":"imageurl","value":"/images/Image1.nii"},{"name":"3d","value":"3d0"},{"name":"sliceX","value":"sliceX0"},{"name":"sliceY","value":"sliceY0"},{"name":"sliceZ","value":"sliceZ0"},{"name":"imageurl","value":"/images/Image2.nii"},{"name":"3d","value":"3d1"},{"name":"sliceX","value":"sliceX1"},{"name":"sliceY","value":"sliceY1"},{"name":"sliceZ","value":"sliceZ1"}];
                     // $scope.newArr = $scope.imagelines;
                      $scope.newArr = JSON.parse($scope.imagelines);
                      angular.forEach($scope.newArr, function(data){
        $scope.dataItems.push(data.value);    
		console.log("Data VALUES: "+data.value);//here I can get he values, like: (Ex: Image1.nii, 3d0, sliceX0, sliceY0, sliceZ0)
		});
                    
                }}
		
		
//	}
 }
}]);