AngularJS depended select box

by Ammi Reddy Kovvuri

HTML

<!DOCTYPE html>
<html>

  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <div ng-app="Aplic" ng-controller="CountryCntrl">
      <select id="country" ng-model="selectedClient" ng-options="client.clientId as client.clientName for client  in clientList track by client.clientId">
        <option value="">Choose</option>
    </select>Departement:
      <select id="state" ng-model="selectedState" ng-disabled="!selectedClient" ng-model="selectedState" ng-options="audit.auditId as audit.auditName for audit in ((clientList | filter:{'clientId':selectedClient})[0].clientAuditDAOList) track by audit.auditId">
        <option value="">Choose</option>
    </select>


      <div>selectedClient id: {{selectedClient}}</div>
      <div>selectedState id: {{selectedState}}</div>
    </div>

  </body>

</html>

JavaScript

// Code goes here
(function() {
  var Aplic = angular.module("Aplic", []);

  Aplic.controller('CountryCntrl', function($scope) {

    $scope.clientList = [{
        'clientId': '1',
        'clientName': "cl1",
        'clientAuditDAOList': [{
          'auditId': '100',
          'auditName': "aud1"
        }, {
          'auditId': '101',
          'auditName': "aud2"
        }]
      },
      {
        'clientId': '2',
        'clientName': "cl2",
        'clientAuditDAOList': [{
          'auditId': '200',
          'auditName': "aud3"
        }, {
          'auditId': '301',
          'auditName': "aud4"
        }]
      }

    ];
    $scope.selectedClient =  $scope.clientList[1];
  });

})();