Two Dependant Drop down select box with Options taken from MySQL database table using Angular

On selection of option of first dropdown list ( category ) , the options from second drop down list ( sub-category ) will change to match the selected option. ( The second drop down list is dependant on first drop down list )

Selected category = {{category}} , Selected cat_id = {{category.cat_id}}
Selected subcategory = {{subcategory}} , Selected subcat_id = {{subcategory.subcat_id}}

<div ng-app="my_app" ng-controller="my_ctrl" >
<select  ng-model="category" ng-options="x.category for x in details" ng-change="onChange()">
</select>
<select   ng-model="subcategory" ng-options="x.subcategory for x in subcat | filter:check_id">
</select>
<br><br><br><br>
<span>Selected category = {{category}}</span> , 
<span>Selected cat_id = {{category.cat_id}}</span>
<br>
<span>Selected subcategory = {{subcategory}}</span> , 
<span>Selected subcat_id = {{subcategory.subcat_id}}</span>
</div>
<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope, $http) {
  $http.get("dd-data.php") // data source for options 
  .then(function (response) {$scope.details = response.data.category_data;});
  
  $http.get("dd-data2.php") // data source for options 
  .then(function (response2) {$scope.subcat = response2.data.subcategory_data;});
////  
$scope.id=null;
 $scope.onChange = function()
{
 $scope.id=$scope.category.cat_id;
 
} 
////

$scope.check_id = function(subcat){
	if($scope.id >0){
	return (subcat.cat_id == $scope.id); 
	}
	return true // display all options if nothing is selected
	
}; 
///////
});
</script>

Using filters

On selection of options from first list, onChange event is triggered and filter is applied for selection of options for second drop down list.
DEMO: Filtering Options using functions

Options Data source

Both the drop down lists are using JSON formatted string as data source.

Using MySQL database.

This source can be taken from MySQL database and output can be JSON strings. The SQL dump of category and subcategory tables
DEMO: Options using JSON format DEMO: Options from MySQL database

Using PDO

The variable $dbo is declared inside the database connection file config.php, read more on PDO connection and config file here.

<?php
require "config.php"; // database connection 

$sql="SELECT  cat_id, category FROM category"; 
$row=$dbo->prepare($sql);
$row->execute();
$result=array('category_data'=>$row->fetchAll(PDO::FETCH_ASSOC));

echo json_encode($result); 
?>

You can check the output ( in JSON format ) of dd-data.php file here for category and dd-data2.php for subcategory.

Using MySQLi connection

Read more about MySQLi and database connection here. All details of data base connection is kept inside config.php file.

<?php
require "config.php"; // database connection 
$result = $connection->query("SELECT subcat_id,cat_id,subcategory  FROM subcategory");
$row = array();
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
$row[] = $rs;
}
echo json_encode(array("subcategory_data"=>$row));

$connection->close();
?>

Drop down List Box
DEMO: Options using JSON format DEMO: OnChange Event

Interlinked Dropdowns with options from MySQL database table

Using filters

Options Data source

Using MySQL database.

Using PDO

Using MySQLi connection