title: AngularJS Controller not working in nested Controller
body: <p>Got a questions regarding the select option value, i can get the value as the select options changed, but i am not able to get the value of the select options thru the search button, it will just give a value <code>undefined</code>. So where is the problem?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div ng-controller="MatIncListCtrl"&gt;
    &lt;button class="fluid labeled icon blue ui button top attached"&gt;&lt;i class="ellipsis vertical icon"&gt;&lt;/i&gt;Toggle Filters Pane&lt;/button&gt;
    &lt;div class="ui attached segment" uib-collapse="isCollapsed"&gt;
      &lt;form role="form" class="ui form"&gt;
        &lt;div class="fields"&gt;
          &lt;div class="twelve wide field" ng-controller="DistinctSupplierCtrl"&gt;
            &lt;label&gt;Supplier&lt;/label&gt;
            &lt;select ng-model="Supplier" class="ui fluid dropdown" ng-options="x.supp_no as x.supp for x in data" ng-change="selectAction()"&gt;
              &lt;option&gt;&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;br /&gt;
      &lt;button type="button" class="ui orange fluid labeled icon button" tabindex="0" ng-click="FindMatInc()"&gt;&lt;i class="search icon"&gt;&lt;/i&gt;Search&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>.controller('DistinctSupplierCtrl', function($scope, $http) {
    $scope.selectAction = function() {
      console.log($scope.Supplier);
    };
    var xhr = $http({
      method: 'post',
      url: 'http://localhost/api/list-distinct-supp.php'
    });
    xhr.success(function(data){
      $scope.data = data.data;
    });
  })
  
  .controller('MatIncListCtrl', function ($scope, $http) {
    $scope.FindMatInc = function (){
      console.log($scope.Supplier);
    }
  });
  </code></pre>