title: How to get selected values into scope from drop down while using nested ng-option?
body: <p>Following is the view code I'm using to populate multiple select dropdown</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-controller="sourceController"&gt;
    &lt;form novalidate ng-submit="submit()"&gt;
      &lt;div class="row"&gt;
        &lt;div class="addNewButton"&gt;
          &lt;button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"&gt;Add New Data Source&lt;/button&gt;
          &lt;div ng-include="'pages/modal.html'"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-3"&gt;
          Location:
          &lt;select id="location" ng-model="location" ng-options="city for (city, facilities) in sourceSelection " style="width: 100px"&gt;
            &lt;option value=''&gt;Select&lt;/option&gt;
          &lt;/select&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-sm-3"&gt;
          Facility:
          &lt;select id="facility" ng-disabled="!location" ng-model="facility" ng-options="facility for (facility, phases) in location"&gt;
            &lt;option value=''&gt;Select&lt;/option&gt;
          &lt;/select&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-sm-3"&gt;
          Phase :
          &lt;select id="phase" ng-disabled="!facility" ng-model="phase" ng-options="phase for phase in facility"&gt;
            &lt;option value=''&gt;Select&lt;/option&gt;
          &lt;/select&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-sm-3"&gt;
          Device Type
          &lt;select id="deviceType" ng-disabled="!phase" ng-model="deviceType"&gt;
            &lt;option value=''&gt;Select&lt;/option&gt;
            &lt;option ng-repeat="deviceType in deviceTypes" value="{{deviceType}}"&gt;{{deviceType}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input type="submit" id="submit" value="Submit" /&gt;
  
    &lt;/form&gt;
    &lt;button onclick="myFunction()"&gt;click here&lt;/button&gt;
    selected choices : {{location}} , {{facility}},
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the controller I'm using is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.controller('sourceController', function($scope, $http, $rootScope) {
    $scope.sourceSelection = {
      "Chennai": {
        "siruseri": ["phase1", "phase2"],
        "chennai one": ["phase1"]
      },
      "kochi": {
        "Kochi_technopark": ["phase1"]
      }
    };
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I want to bind selected field (ie. selected location , Facility , phase in controller)with <code>$scope</code> in controller side and model I'm using there is giving me the value of the selected drop down key.</p>