title: Printing multiple ng-repeat elements in a single row
body: <p>I have a list of item and ng-repeat display them in the page. Below is the simplified structure - </p>
  
  <pre><code>[   
    {
      "id": "elem-1",
      "position": {
        "row": 1,
        "column": 1
       }   
    },
    {
      "id": "elem-2",
      "position": {
        "row": 2,
        "column": 1
       }   
    },
    {
      "id": "elem-3",
      "position": {
        "row": 2,
        "column": 2
       }   
    }    
  ]
  </code></pre>
  
  <p>Now elem-1 should come in first row, while the second row should have elem-2 and elem-3, side-by-side. I have checked ng-repeat-start and also gone through the existing similar topics in Stack overflow but not sure how to do this. This is my HTML template</p>
  
  <pre><code>&lt;div layout="row" ng-repeat="item in inputElemAll"&gt;
      &lt;div ng-if="if the current row has 1 column"&gt;
          &lt;md-input-container class="md-block"&gt;
              &lt;!-- Print the element--&gt;
          &lt;/md-input-container&gt;
      &lt;/div&gt;
      &lt;div ng-if="if current row has more than 1 column"&gt;
          &lt;md-input-container class="md-block" flex="33"&gt;
              &lt;!-- Print the element--&gt;
          &lt;/md-input-container&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>All I'm trying here is to add a flex attribute in case I have to show more columns in a single row. But the problem is, with every ng-repeat a new &lt;div&gt; with "row" layout is started and I'm stuck here. Not sure how to access multiple ng-repeat elements and also be on the same &lt;div&gt; simultaneously.  </p>
  
  <p>P.S. I use <a href="https://material.angularjs.org/latest/layout/introduction" rel="nofollow noreferrer">material layout</a>, in case you are interested.</p>