title: Show Hide Divs based on dropdown selection
body: <p>I need your help. I've resolved my issue partially but not able to figure out things to make it dynamically. </p>
  
  <p>Requirements: I've two Panels which will only appear based upon selection of dropdown list values</p>
  
  <p>Panel Names are : Panel_1 and Panel_2
  Dropdown list values: Panel1 and Panel2</p>
  
  <p>My code which is working fine is as follows:</p>
  
  <p>code for dropdown list (hard coded):</p>
  
  <pre><code>&lt;select name="type" ng-model="dataparameters.type" ng-dropdown required ng-change="SelectDDL()"&gt;
  
                                                          &lt;option ng-option value="Panel 1"&gt;Panel 1&lt;/option&gt;
                                                          &lt;option ng-option value="Panel 2"&gt;Panel 2&lt;/option&gt;
                                                      &lt;/select&gt;
  </code></pre>
  
  <p>Code For Panels:</p>
  
  <pre><code>&lt;div class="panel panel-default" style="width:650px" id="P1" ng-if="dataparameters.type == 'Panel 1'"&gt;
                      &lt;div class="panel-heading"&gt;
                            Panel_1
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div&gt;
                              &lt;label class="col-xs-6 control-label"&gt;Panel1 :&lt;/label&gt;
                              &lt;div class="col-xs-6"&gt;
                                  &lt;input type="number" class="form-control" ng-model="dataparameters.P1" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="panel panel-default" style="width:650px" id="P2" ng-if="dataparameters.type == 'Panel 2'"&gt;
                      &lt;div class="panel-heading"&gt;
                              Panel_2
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div&gt;
                              &lt;label class="col-xs-6 control-label"&gt;Panel2 :&lt;/label&gt;
                              &lt;div class="col-xs-6"&gt;
                                  &lt;input type="number" class="form-control" ng-model="dataparameters.P2" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Angular.JS file code:</p>
  
  <pre><code>var application = angular.module('AddEditComponentApp', []);
  
  application.controller('addeditcomponentcontroller', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
      $scope.Selected_DataParameters_Add = {}
   $scope.SelectDDL = function () {
  
          }
  }]);
  </code></pre>
  
  <p>Here we can see the dropdown list is hardcoded. I've filled my dropdown list dynamically from the database but after that panel visibility is not working.</p>
  
  <p>Code to fill dropdown list is as follows:</p>
  
  <pre><code> &lt;select id="Selected_DataParameters_Add" ng-model="$scope.Selected_DataParameters_Add" ng-options="dp.Data_Parameter_Name for dp in DataParameters" ng-dropdown required ng-change="Checked()"&gt;
  
                                                          &lt;option ng-option value=""&gt;Select Data Fields&lt;/option&gt;
  
  
                                                      &lt;/select&gt;
  </code></pre>
  
  <p>I think the only problem is I'm not able to understand how to fill values dynamically to ng-option value=""</p>