Second select box needs to be populated after the first select box is selected

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
	.margins{
		margin-right:8px;
		margin-bottom: 5px; 
	}
</style>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div>
	<h2>LogValues</h2>
    <div class="logval" ng-repeat="num in loop">
	
        <select class="margins" ng-change=populate() class="custom-select"
                id="inputGroupSelect01" ng-model="logType"
                ng-options="x.type for x in logValues[0].parameters">
            <option value="" disabled selected>Select Log Values</option>
        </select>
	
        <select class="margins" ng-model="logVal"
                ng-options="y.val for y in statistics">
            <option value="" disabled selected>Select Statistic</option>      
        </select>		    	

    </div>
	
	

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.loop = [1,2,3,4];
    $scope.logValues = 
   [
	{
		"name" : "Log Values",
		"parameters" : 
		[
			
				{"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
				{"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
				{"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
			
		]		
		
	}];

$scope.statistics = []
$scope.populate = function() {
$scope.statistics = [
		
		{"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
			{"val":"Mix "},{"val":"Max"}
			
	]
    }
    
});
</script>
</body>
</html>

The Above code is printing the two select boxes four times.The requirement is to not show any option in second select box before the user selects the first select box.I have achieved it by emptying the statistics array initially and populating it using on change function.

The problem is that when I select an option in first select box in row1 the respective 'select statistic' is getting populated which is fine but along with it the remaining 'select statistic' select boxes are also getting populated.I need it to be empty until i select the respective row select box.The explanation may be confusing please check the demo for better understanding. Thanks in Advance!Please help..

I have included the Demo

Solution

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
    integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <style>
    	.margins{
    		margin-right:8px;
    		margin-bottom: 5px; 
    	}
    </style>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">
    <div>
    	<h2>LogValues</h2>
    	<div class="logval" ng-repeat="num in loop">
    	
    	    <select class="margins"  id="inputGroupSelect01"
                    ng-model="num.logType"
                    ng-options="x.type for x in logValues[0].parameters">
    	        <option value="" disabled selected>Select Log Values</option>
    	    </select>
    		
    	    <select class="margins" ng-disabled="!num.logType"
                    ng-model="logVal"
                    ng-options="y.val for y in statistics">
    	        <option value=""  selected>Select Statistic</option>
    	    </select>		    	
    	</div>
    	
    	

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.loop = [{"stat":1},{"stat":2},{"stat":3},{"stat":4}];
        $scope.logValues = 
       [
    	{
    		"name" : "Log Values",
    		"parameters" : 
    		[
    			
    				{"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
    				{"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
    				{"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
    			
    		]		
    		
    	}];

    // $scope.statistics = []
    // $scope.populate = function() {
    $scope.statistics = [
    		
    		{"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
    			{"val":"Mix "},{"val":"Max"}
    			
    	]
        //}

        
    });

    </script>
    </body>
    </html>

First you must loop on objects instead of numbers in $scope.loop in order to generate different scope for each select model, one value for each ng-model and then you can disable the second select box depending on the value of the first select box. Here I have disabled the second select box if the first select box model is undefined.. It will be enabled once you pick up a log value