JSFiddle - React, Tailwind, and code Playground

by itamark

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <div ng-controller="ConfigCtrl">
       <select ng-model="manufacturer" id="manufacturer" ng-options="man.name as man.name for man in mans" ng-change="getcams()">
   					<option value="">-- choose manufacturer --</option>
   				</select>
</div>

JavaScript

function ConfigCtrl($scope, $http) {
    
$scope.manus = {
    "manufacturers": [
        {
            "name": "Man A",
            "cameras": [
                {
                    "name": "Cam 1",
                    "type": "Audio device",
                    "resolution": "Unknown",
                    "channels": "1"
                }
            ]
        },
        {
            "name": "Man B",
            "cameras": [
                {
                    "name": "Cam 2",
                    "type": "Camera",
                    "resolution": "720P/1.3MP",
                    "channels": "2"
                },
                {
                    "name": "Cam 3",
                    "type": "Camera",
                    "resolution": "1080P/3MP",
                    "channels": "1"
               }
            ]
        }
    ]
}    

$scope.maninfo = $scope.manus;
    
    
$.each($scope.manufacturers.manufacturers, function(index, value) {
    $scope.mans.push(
    	{
        name: value.name,
        cameras: value.cameras
    	}
    	);
});
}