title: Add elements dynamically from selected combo box value in angular js
body: <p>I would like to add a text box when the value "LIKE" is selected from combo box and two date pickers when value "BETWEEN" is selected. </p>
  
  <p>Right now I am able to read the selected value using <code>ng-change</code> method, but I am not able to figure out how to add elements based on selected drop down value.</p>
  
  <pre><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Text Box&lt;/title&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope)
              {
                  $scope.comboBox = []
                  $scope.addDropDown = function ()
                  {
                      $scope.comboBox.push('');
                  }
                  $scope.deleteDropDown = function (index)
                  {
                      $scope.comboBox.splice(index, 1);
                  }
                  $scope.changedValue = function (item) 
                  {
                      alert(item);
                  }
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="controllerAsExample"&gt;
          &lt;div id="ctrl-as-exmpl" ng-controller="SettingsController1"&gt;
  
              &lt;ul&gt;
                  &lt;button ng-click="addDropDown()"&gt;add&lt;/button&gt;
                  &lt;button ng-click="deleteDropDown()"&gt;Delete&lt;/button&gt;
                  &lt;li ng-repeat="dropDown in comboBox track by $index"&gt;
                      &lt;select ng-model="valueSelected" ng-change="changedValue(valueSelected)"&gt;
                          &lt;optgroup&gt;
                              &lt;option value="LIKE"&gt;LIKE&lt;/option&gt;
                              &lt;option value="BETWEEN"&gt;BETWEEN&lt;/option&gt;
                              &lt;option value="EXISTS"&gt;EXISTS&lt;/option&gt;
                              &lt;option value="Like"&gt;IN&lt;/option&gt;
                              &lt;option value="NOT"&gt;NOT&lt;/option&gt;
                              &lt;option value="OR"&gt;OR&lt;/option&gt;
                              &lt;option value="ISNULL"&gt;ISNULL&lt;/option&gt;
                              &lt;option value="UNIQUE"&gt;UNIQUE&lt;/option&gt;
                              &lt;option value="="&gt;=&lt;/option&gt;
                              &lt;option value="!="&gt;!=&lt;/option&gt;
                              &lt;option value="&gt;"&gt;&gt;&lt;/option&gt;
                              &lt;option value="&lt;"&gt;&lt;&lt;/option&gt;
                              &lt;option value="&gt;="&gt;&gt;=&lt;/option&gt;
                              &lt;option value="&lt;="&gt;&lt;=&lt;/option&gt;
                          &lt;/optgroup&gt;
                      &lt;/select&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>