Dependent dropdown box using nya-bootstrap-select

I am using nya-bootstrap-select with AngularJs below is my scenario & sample data

$scope.ports = [
{
  "row_id": 1,
  "name": "Port1",
  "terminals": [
    {"row_id": 1, "name": "1A"},
    {"row_id": 2, "name": "1B"},
    {"row_id": 3, "name": "1C"}
  ]
},
{
  "row_id": 2,
  "name": "Port2",
  "terminals": [
    {"row_id": 4, "name": "2A"},
    {"row_id": 5, "name": "2B"},
    {"row_id": 6, "name": "2C"}
  ]
} 

Code (JavaScript):

1. First dropdown should contain ports and second should contain terminals.
2. Once i select a port in the first dropdown, only the terminals of the selected port should be shown in the second dropdown.
3. If the model of each dropdown already has specific row_ids, the relevant option should be selected automatically.

I could achieve the first two points and i am stuck with the third point. I used lots of workaround to achieve this. Please help me if there is a proven solution. I searched a lot over the internet a lot but no luck.

 

Write it as AJAX. Once the first dropdown is selected, send the server the choice and have the server decide whether the second dropdown should be selected or not, then send the client back the code for the dropdown (or have the client write the second dropdown based on the result of the first one if you can follow the code you write that way).