title: CSS class for rendering divs dynamically on half of page
body: <p>I am stuck in rendering div via ng-repeat. I want to render the coming divs in ng-repeat one by one covering half the page.
  Here is my code:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div class="form-group col-md-6" ng-repeat="field in selectedfields" ng-if="!selectedfields[$index].allowedValues || selectedfields[$index].allowedValues.length === 0 "&gt;
            &lt;label class="control-label" for="domain"&gt;{{field.name}} &lt;/label&gt;
            &lt;input placeholder="{{field.name}}" class="form-control"  type="text" id="domain"&gt;
      &lt;/div&gt;
      &lt;div class="form-group col-md-6" ng-repeat="field in selectedfields" ng-if="selectedfields[$index].allowedValues.length &gt;= 1"&gt;
             &lt;label class="control-label" for="{{field.name}}"&gt;{{field.name}} &lt;/label&gt;
            &lt;select class="form-control"&gt;
                 &lt;option value="{{allowedValue.name}}" ng-repeat="allowedValue in field.allowedValues" ng-model="field.allowedValues"&gt;{{allowedValue.name}}&lt;/option&gt;
              &lt;/select&gt;
      &lt;/div&gt; 
   &lt;/div&gt;
  </code></pre>
  
  <p>The divs(textboxes/dropdown) under the parent div should appear one by one covering half the page, but they are coming on full page. Each div is rendering on next line. Can someone please suggest what am I doing wrong in giving the css class?</p>