AngularJS Controller not working in nested Controller
<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>