I have set up two div elements with a dropdown control in one named div1. I am looking to hide div2 until a value is selected in the dropdown. How can I show or hide a div based on ng-change, ensuring that div2 remains hidden until a value is selected? Code:-
<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init="getFormData();">
<div id="div1">
<tr>
<td nowrap>Company Name:
</td>
<td>
<asp:TextBox ID="txtCompanyName" runat="server" CssClass="NormalTextBox" TabIndex="1" Width="160px" Height="10px" ng-model="custom.txtCompanyName" required=""></asp:TextBox>
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select id="listHomeCountry1" style="width: 182px !important; height: 34px;">
<option value="0">--- Select an option ---</option>
<option data-ng-repeat="Cntry in listHomeCountry" ng-model="custom.listHomeCountry" ng-change="" value="{{Cntry._key}}">{{Cntry._value}}</option>
</select>
</tr>
<div id="div2">
<table style="position: relative; left: 0px;">
<tr align="left">
<td nowrap style="width: 200px">
<asp:Label ID="lblContactAddress1" runat="server" CssClass="NormalTextBox" Width="60%"></asp:Label></td>
<td nowrap>
<asp:TextBox ID="txtContactAddress1" TabIndex="3" Name="txtContactAddress1" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress1" required=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblContactAddress2" runat="server" CssClass="NormalTextBox"></asp:Label></td>
<td>
<asp:TextBox ID="txtContactAddress2" Name="txtContactAddress2" TabIndex="4" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress2" required=""></asp:TextBox>
</td>
</tr>
</div>
</div>
Now I want div2 to remain hidden until a value is selected in my dropdown.