title: Angularjs two select boxes connected to one model objects - selected option
body: <p>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: <a href="http://plnkr.co/edit/qhfdqU?p=preview" rel="nofollow">plnkr</a></p>
  
  <pre><code>    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+', ';
  };
      });
  </code></pre>
  
  <p>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</p>
  
  <p>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.</p>