title: Populate dropdown list dynamically in AngularJS
body: <p>I'm trying to generate dynamic form based on the key of document fields and using <code>ng-if</code> attribute in AngularJS.</p>
  
  <p>Ex: </p>
  
  <pre><code>- If field name is "name|string" then populate textfield
  - If field name is "name|select" then populate dropdownlist
  - If field name is "name|datepicker" then populate datepicker
  </code></pre>
  
  <p>Following is the code:</p>
  
  <pre><code>&lt;div class="form-group" ng-repeat="(index, formVal) in providerModelData"  ng-if="!$first"&gt;                    
          &lt;label&gt;{{mySplit(index,0) | uppercase}}&lt;/label&gt;
          &lt;div ng-if="!mySplit(index,1)"&gt;
              &lt;input type="text" class="form-control" ng-model="providerModelData[index]"&gt;
          &lt;/div&gt;
          &lt;div ng-if="mySplit(index,1) == 'datepicker'"&gt;
              &lt;input type="text" class="form-control" ng-model="providerModelData[index]"&gt;            
          &lt;/div&gt;
                  &lt;div ng-if="mySplit(index,1) == 'select'"&gt;                        
          &lt;select class="form-control" ng-init="getDropdownData(index,colName)" ng-options="dropdown._id for dropdown in dropdownData[colName]"&gt;                
              &lt;option value=""&gt;Select&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>$scope.mySplit = function(string, nb) {
              var array = string.split('|');
              return array[nb];
          }
  </code></pre>
  
  <p><code>textfields</code> are working fine and populating data but I'm facing issue while populating dropdown fields.</p>
  
  <p>Example: I've two dropdown fields in my mongodb document i.e. <code>city|select</code> and <code>state|select</code></p>
  
  <p>I'm trying to use <code>ng-options</code> to call function by passing index and colName (document name) to populate dropdownlist but its not working.</p>
  
  <p>Following is the code:</p>
  
  <pre><code>    $scope.dropdownData = {};
          $scope.getDropdownData = function (query, colName) {
              $http.get('/getdropdowndata/', {
                  params: {
                      query: query,
                      colName: colName
                  }
              }).success(function (response) {
  
                  $scope.dropdownData[colName] = response;                    
  
              });
          };
  </code></pre>
  
  <p>Express:</p>
  
  <pre><code>router.route('/').get(function (req, res) {    
      var url_parts = url.parse(req.url, true);
      var query = url_parts.query;
      console.log(query.query);
      db.collection(query.colName).aggregate([{
          "$group":{
              "_id":"$"+query.query
              }
          }],function (err, docs) {        
          console.log(docs);
          res.json(docs);
      });
  });
  </code></pre>
  
  <p>Initially I tried calling function in <code>ng-repeat</code> but it was going into infine loop. Then later I tried <code>ng-init</code> options but it only calls or initialize once which is not working in my case. Here I need to call function dynamically and based on that I want to populate dropdown for different fields.</p>
  
  <p>Any help would be appreciated.</p>