title: Populate table data with $http.get on dropdown option selected in Angular
body: <p>I am new to Angular and would like to learn how to accomplish this task below:</p>
  
  <p>I have a dropdown that contains a list of table names from a database. When a table name is selected from the drop down I want to make an HTTP GET call to a web API method which returns the list of column names in the selected table.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div ng-app="myApp"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;h1&gt;Table Information&lt;/h1&gt;
              &lt;hr /&gt;
              &lt;div ng-controller="TableController" class="col-lg-6"&gt;
                  &lt;label&gt;Select a Table:&lt;/label&gt;
                  &lt;select id="tablename" ng-options="table.Name for table in tables track by table.Name" ng-model="data.selectedOption" class="form-control"&gt;&lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;h1&gt;{{data.selectedOption}}&lt;/h1&gt;
              &lt;hr /&gt;
              &lt;div ng-controller="TableColumnController" class="col-lg-6"&gt;
                  &lt;table class="table"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Column Name&lt;/th&gt;
                          &lt;th&gt;Type&lt;/th&gt;
                          &lt;th&gt;Max Characters&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;tr ng-repeat="tablecolumn in tablecolumns"&gt;
                          &lt;td&gt;
                              {{tablecolumn.Name}}
                          &lt;/td&gt;
                          &lt;td&gt;
                              {{tablecolumn.Type}}
                          &lt;/td&gt;
                          &lt;td&gt;
                              {{tablecolumn.MaxCharacters}}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('TableColumnController', function ($scope, $http) {
      $http.get('http://localhost:61475/api/SxTableInfo/',
      {
          params: {
              tablename: "smsn"
          }
      }).
      success(function (data, status, headers, config) {
          $scope.tablecolumns = data;
      }).
      error(function (data, status, headers, config) {
          alert("error!");
      });
  });
  
  app.controller('TableController', function ($scope, $http) {
      $http.get('http://localhost:61475/api/SxTableInfo/').
          success(function (data, status, headers, config) {
              $scope.tables = data;
          }).
          error(function (data, status, headers, config) {
              alert("error!");
          });
  });
  </code></pre>
  
  <p>What is the best way to do this?</p>
  
  <p>Here is just an example of what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/fhzI5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fhzI5.png" alt="Example"></a></p>
  
  <p>UPDATED CODE:</p>
  
  <pre><code>          &lt;div class="row" ng-app="myApp"&gt;
      &lt;div ng-controller="ctrl"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;h1&gt;Table Information&lt;/h1&gt;
              &lt;hr /&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;label&gt;Select a Table:&lt;/label&gt;
                  &lt;select id="tablename"
                          ng-options="table.Name for table in tables track by table.Name"
                          ng-model="data.selectedOption"
                          ng-change="getColumns(data.selectedOption)"
                          class="form-control"&gt;&lt;/select&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;h1&gt;{{data.selectedOption.Name}}&lt;/h1&gt;
              &lt;hr /&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;table class="table table-striped table-hover"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Column Name&lt;/th&gt;
                              &lt;th&gt;Type&lt;/th&gt;
                              &lt;th&gt;Max Characters&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr ng-repeat="tablecolumn in tablecolumns"&gt;
                              &lt;td&gt;
                                  {{tablecolumn.Name}}
                              &lt;/td&gt;
                              &lt;td&gt;
                                  {{tablecolumn.Type}}
                              &lt;/td&gt;
                              &lt;td&gt;
                                  {{tablecolumn.MaxCharacters}}
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @section Scripts{
      &lt;script&gt;
          var app = angular.module('myApp', []);
  
          app.factory('tableService', ['$http', function ($http) {
  
                  function getColumns(selection) {
                      $http.get('http://localhost:61475/api/SxTableInfo/', { params: { tablename: selection } }).success(function (data) {
                          return data;
                      });
                  }
  
                  function getTables() {
                      $http.get('http://localhost:61475/api/SxTableInfo/').success(function (data) {
                          return data;
                      });
                  }
  
                  return { getColumns: getColumns, getTables: getTables }
              }]);
  
          app.controller('ctrl', ['$http', '$scope', 'tableService', function ($http, $scope, tableService) {
  
              $scope.tables = tableService.getTables();
  
              $scope.getColumns = function (selection) {
                  $scope.tablecolumns = tableService.getColumns(selection.Name);
              }
  
          }]);
  
      &lt;/script&gt;
  }
  </code></pre>