Angularjs filtering values on two dropdowns - angularjs

Question

I've a quick issue that I can't handle.
I've a data for a dropdown, and depending on the value that's being picked for that dropdown, I want the data to change on the second dropdown, also preferably if it's hidden until the first dropdown is picked.
Atm, I can pick the first controller but I don't have an idea on how to connect the two dropdowns.
Any help will be greatly appreciated. Thank you in advance
new test service
export default class newtest {
constructor($http){
'ngInject';
this._$http = $http;
let testData = this;
this.options = {
releases: [
{value: 1, name: 'R1', environments : ['R1-QA1', 'R1-QA2']},
{value: 2, name: 'R2', environments : ['R2-QA1', 'R2-QA2']},
{value: 3, name: 'R3', environments : ['R3-QA1', 'R3-QA2']}
],
environments : [
['R1-QA1', 'R1-QA2'],
['R2-QA1', 'R2-QA2'],
['R3-QA1', 'R3-QA2']
]
};
}
}
new test controller
class NewTestCtrl {
constructor(NewTest, $state, $http) {
'ngInject';
this._NewTest = NewTest;
this.options = this._NewTest.options;
this.releaseValues = this.options.releases.name;
this.envValues = [];
}
HTML
<fieldset>
<select ng-model="release" ng-options="release.name for release in $ctrl.options.releases">
<option value="" disabled selected>Select</option>
<option value="value">{{name}}</option>
</select>
</fieldset>
<fieldset>
<select ng-model="release" ng-options="env for environments in $ctrl.options.environments">
<option value="" disabled selected>Select</option>
<option value="env">{{env}}</option>
</select>
</fieldset>

Answer 1

First, both your select elements have ng-model="release". This is the data field it is bound to in your controller. The second select element should be something like ng-model="environment".
You should be able to make the environment list change based on the the release selected by having the options use the release data element, something like ng-options="env for environments in $ctrl.options.releases[release].environments"
Lastly, you could hide the environment select until a release is selected with a ng-Show attribute based on release having a value. Something like ng-Show="release>0" and initialize release to 0 in your constructor.

Answer 2

Thanks for the help #Jim Moore, I found a good fiddle link that I followed for guidelines https://jsfiddle.net/annavester/Zd6uX/
And I changed the json of my data to >
environments : {
'Release 1' : ['R1-QA1', 'R1-QA2'],
'Release 2' : ['R2-QA1', 'R2-QA2'],
'Release 3' : ['R3-QA1', 'R3-QA2']
}
and also the html to, For anyone going through the same issue in the future, I hope this helps.
<fieldset>
<select id="release"
ng-model="$ctrl.release"
ng-hide="!$ctrl.browsers"
ng-options="release for (release, environments) in $ctrl.environments">
<option value="" disabled selected>Select</option>
</select>
</fieldset>
<fieldset>
<select id="environment"
ng-model="$ctrl.environment"
ng-hide="!$ctrl.release"
ng-options="environment for (release, environment) in $ctrl.release">
<option value="" disabled selected>Select</option>
</select>
</fieldset>