Implementing a Dropdown Menu in AngularJs Using ngOptions

      For this post we will demonstrate how two Dropdown menus can both use the same data source. I would also like to add that this method will also continuously populate the dropdown menu as new data is added, and through the ngChange method it allows you to get the data selected out of the form as well. I will be showing two different versions, one of them which allows for null values, a second one that doesn’t.

      This version allows for null values:

<span class="nullable">
<div>
    <select id="contains" ng-options="table as table.name for table in tables" ng-model="tableName"
            ng-change="updateContains()">
        <option value="">-- choose table --</option>
    </select>
</div>
    </span>
        <span class="nullable">
<div>
    <select id="depends" ng-options="table.name for table in tables" ng-model="tableName1"
            ng-change="updateDependency()">
        <option value="">-- choose table --</option>
    </select>

</div>
        </span>

      This version does not:

<div>
    <select id="contains" ng-options="table as table.name for table in tables" ng-model="tableName"
            ng-change="updateContains()">
    </select>
</div>
<div>
    <select id="depends" ng-options="table.name for table in tables" ng-model="tableName1"
            ng-change="updateDependency()">
    </select>

</div>

      The main difference between these two version is the options line in the first version of the code.

      This is the controller code used for both of these functions:

$scope.updateDependency = function(){
  $scope.depends= $scope.tableName1.name;
};
$scope.updateContains = function(){
  $scope.contains = $scope.tableName.name;

      This is a very simple code that can be inserted into any application. As you can see it takes a very small amount of code to implement a dropdown menu which is able to update itself as its data is updated.