Angularjs two select boxes connected to one model objects - selected option

Question

I have a problem with two select boxes that are connected to the one object. I have created a plunker but it's fine there but not in my app. Basically I copied everything from my code to plunker and it's working there but not in my code. Here's the link: plnkr

    app.controller('MainCtrl', function($scope) {
      $scope.consoleLog = '';
      $scope.sites = [
{name: 'site1', id: 001, datasources:[
  {name: 'one', id: 441},
  {name: 'two', id: 442},
  {name: 'three', id: 443}
]},
{name: 'site2', id: 002, datasources:[
  {name: 'four', id: 444},
  {name: 'five', id: 445},
  {name: 'six', id: 446},
  {name: 'seven', id: 447}
]}];

$scope.selectedSiteIndx = 0;
$scope.selectedSite = $scope.sites[$scope.selectedSiteIndx].id;
$scope.selectedDs = $scope.sites[$scope.selectedSiteIndx].datasources[0].id;

$scope.selectedSiteChanged = function (selectedSite){
    var siteIndx = $scope.sites.map(function(e){return e.id}).indexOf(selectedSite);
    $scope.selectedDs = $scope.sites[siteIndx].datasources[0].id; 
    $scope.selectedSite = selectedSite;
    $scope.selectedSiteIndx = siteIndx;
};
$scope.selectedDsChanged = function(selDs){
    $scope.selectedDs = selDs;
    $scope.consoleLog += 'selected:'+selDs+', ';
};
    });

I have two select boxes there. First is for site selection. Second is for Datasource selection. When you select a site in first box than 2nd select box will change it's list to nested datasource from new object. And it's working fine with no problem. You can change site and new data will be populated in 2nd box. I want to to have a default one selected (1st option avialable). So when you will select site, first datasource of the site will be auto selected. Problem in my app (not in plnkr for some reason) is when I select different datasource from box2 and then change site in 1st box. The default first option is not automatically selected. Before I change datasource I can change site many times and always first option in datasources box 2 will be selected. But Once I touch datasource box it's stopped. As I said you can't see that on plnkr. I Also noticed that datasource change event listener is triggered with datasource Id = null when I change site. But this happened only after I touch box no.2

Any ideas why? I have tried many different things to options, selected ect. Can't make it work. I just want to have first option available always selected.

Answer 1

Till you have no idea why this doesn't work in your app and works in plunker.

I'm just gonna give you a cleaner way to do the same job ... thay may eventually solve your issue.

First see it in work in this plunker

I simply use the whole objects instead of using the index (that was really confusing)

<select ng-options="site as site.name for site in sites"
   ng-model="selectedSite" ng-change="selectedDs = selectedSite.datasources[0]"></select>
<select ng-options="ds as ds.name for ds in selectedSite.datasources"
   ng-model="selectedDs"></select> 

Note that this is site as and ds as instead of site.id and ds.id.

I also use directly the sub collection of your model value in selectedSite.datasources

In the controller i just init the values

$scope.selectedSite = $scope.sites[0];
$scope.selectedDs = $scope.selectedSite.datasources[0];

I also have this ng-change on the first input

ng-change="selectedDs = selectedSite.datasources[0]"

Hope it magically solved your problem.