mysql - Dynamic Drop Down AngularJS and Database with JSON -

i have figured out how populate first dropdown menu database angular, stuck on how grab selected value of first dropdown box query populate second box. also, if data in separate tables, have make api call everytime dropdown selected? have seen plenty of examples doing pre set tables, not actual api calls. confused.

here have now.

app.controller('selectoptgroupcontroller', function($scope,$http) {         $http.get('api2.php').         success(function(data) {             $scope.animals = data;         });          $scope.species= [];          $scope.getoptions2 = function(){             //not sure here           };    }) 

html file

<div ng-controller="selectoptgroupcontroller" class="md-padding selectdemooptiongroups">           <div>             <h1 class="md-title">select animal</h1>             <div layout="row">               <md-select ng-model="animals" placeholder="animals" ng-change="getoptions2()">                 <md-option ng-repeat="animal in animals" value="{{animal.animal}}">{{animal.animal}}</md-option>               </md-select>               <md-select ng-model="species" placeholder="species">                 <md-option ng-repeat="spec in species" value="{{spec.animal_species}}">{{spec.animal_species}}</md-option>               </md-select>            </div>         </div> 

as of database has 1 table 2 columns being animal , animal_species. there multiple species of same animal, example there 3 inserts animal name of bear each of animal_species different grizzly, black, , polar. help!

for first question ng-model of md-select correspond selected animal in collection, in example $scope.model.selectedanimal, variable can use access selected animal.

<div ng-controller="selectoptgroupcontroller" class="md-padding selectdemooptiongroups">     <div>         <h1 class="md-title">select animal</h1>         <div layout="row">             <md-select ng-model="model.selectedanimal" placeholder="animals" ng-change="getspecies()">                 <md-option ng-repeat="animal in model.animals" value="{{ animal }}">{{ animal }}</md-option>             </md-select>             <md-select ng-model="model.selectedspecies" placeholder="species">                 <md-option ng-repeat="species in model.species" value="{{ species.animal_species }}">{{ species.animal_species }}</md-option>             </md-select>         </div>     </div> </div> 

as repeated api calls question, can either have database return species , manage 'active' ones in js, or use service cache each request @ least each animal query api once. keeps data logic out of controller make reusable (as easy share data between multiple controllers/directives/services).

app.controller('selectoptgroupcontroller', ['$scope', 'animalservice', function($scope, animalservice) {     $scope.model = {         animals: [],         species: [],         selectedanimal: '',         selectedspecies: {}     };      animalservice.getanimals().then(function(data){         $scope.model.animals = data;     });      $scope.getspecies = function(){         animalservice.getspecies($scope.model.selectedanimal).then(function(data){             $scope.model.species = data;         });      }; }]); //typo here  app.factory('animalservice', ['$http', '$q', function($http, $q){     var cache = {};      return {         getanimals: function(){             return $http.get('api2.php').then(function(result) {                 return result.data;             });         },         getspecies: function(animal){             if(cache[animal]){                 return $q.when(cache[animal]);             } else{                 return $http({                     url: 'whatever.php',                     method: 'get',                     params: {                         animal: animal                     }                 }).then(function(result){                     cache[animal] = result.data;                     return cache[animal];                 });             }         }     }; }]); 

if want species in 1 go , filter on front end can this:

app.controller('selectoptgroupcontroller', ['$scope', 'animalservice', function($scope, animalservice) {     $scope.model = {         animals: [],         species: [], //this contain selected animals species         allspecies: [], //this contain species animals         selectedanimal: '',         selectedspecies: {}     };      animalservice.getanimals().then(function(data){         $scope.model.animals = data;     });      animalservice.getspecies().then(function(data){         $scope.model.allspecies = data;     });      $scope.getspecies = function(){         //this filters out species selected animal         $scope.model.species = $scope.model.allspecies.filter(function(species){             return species.animal === $scope.model.selectedanimal;         });     }; }]);  app.factory('animalservice', ['$http', '$q', function($http, $q){     return {         getanimals: function(){             return $http.get('api2.php').then(function(result) {                 return result.data;             });         },         getspecies: function(animal){             return $http.get('api3.php').then(function(result){                 return result.data;             });         }     }; }]);