Question: **Requirement is to display the selected option inside controller and populate other select on the basis of currently selected option.**

Below the HTML code snippet:

```
<html ng-app="myApp">
....
 <section ng-controller="myCtrl">
  <select ng-model="selectedName" ng-options="x for x in category">
 </select>
  <select ng-model="selectedSubName" ng-options="x for x in subcategory">
 </select>
 </section>
....
</html>

```

The controller used:

```
<script>
var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {

 $scope.category = ["Design", "UI", "Web Stack", "Unit Testing"];
 //Use Conditional Statements to populate options for the other <select> 
  i.e, subcategory

 $scope.subcategory = ["HTML", "CSS", "JS", "Java"];
});
</script>

```

Answer: 
[Async](https://caolan.github.io/async/) provides control flow methods allowing to do so.

Using [async.each](https://caolan.github.io/async/docs.html#each):

```
async.each(openFiles, function(file, callback) {

    // Perform operation on file here.
    console.log('Processing file ' + file);

    if( file.length > 32 ) {
      console.log('This file name is too long');
      callback('File name too long');
    } else {
      // Do work to process file here
      console.log('File processed');
      callback();
    }
}, function(err) {
    // if any of the file processing produced an error, err would equal that error
    if( err ) {
      // One of the iterations produced an error.
      // All processing will now stop.
      console.log('A file failed to process');
    } else {
      console.log('All files have been processed successfully');
    }
});

```
If you don't want to use a library, you can code it yourself. It would also be very instructive. I took your issue and coded a dummy async loop : 

```js
function listTopSongs(query) {
    return new Promise(async(resolve, reject) => { //add async here in order to do asynchronous calls
        const str = query.split(",") //str is const, and the other variable was not used anyway

        for( let i = 0;i < str.length; i++) {
            const planet = await sampleFn(str[i], 'sample', resolve, reject)
            console.log(planet)
        }
    });
};

function sampleFn(a, b, c, d) {
    return fetch(`https://swapi.co/api/planets/${a}/`)
        .then(r => r.json())
        .then(rjson => (a + " : " + rjson.name))
}

listTopSongs("1,2,3,4,5,6,7,8,9")
```

I used some dummy star wars API to fake a long promise but it should work with your sampleFn. Be careful, it is very, very slow if you have network call like the one in the example.

**EDIT:** I ran your code and I noticed there are a few mistakes: there is no resolve in your promise so it's not a thenable (<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve> *see thenable* )

Here is a fully working code. The nice part : no library needed, no dependencies.

```js
//for node.js, use node-fetch :
//const fetch = require("node-fetch")

function listTopSongs(query) {
    return new Promise(async(resolve, reject) => { //add async here in order to do asynchronous calls
        const str = query.split(",") //str is const, and the other variable was not used anyway
        const planets = []
        for (let i = 0; i < str.length; i++) {
            const planet = await sampleFn(i + 1, str[i], resolve, reject)
            planets[i] = planet
            console.log(planet)
        }
        resolve(planets)
    });
};

function sampleFn(a, b, c, d) {
    return fetch(`https://swapi.co/api/planets/${a}/`)
        .then(r => r.json())
        .then(rjson => (a + b + " : " + rjson.name))
}

listTopSongs("a,b,c,d").then(planets => console.log(planets))
```