title: angularjs ng-repeat on a element with ng-if
body: <p>I am using angularjs for my app, where I have </p>
  
  <pre><code>$scope.columns = [
                                          {
                                            "displayName": "Column A",
                                            "selected": true,
                                            "sortable": true
                                          },
                                          {
                                            "displayName": "Column B",
                                            "selected": true,
                                            "sortable": false
                                          },
                                          {
                                            "displayName": "Column C",
                                            "selected": true,
                                            "sortable": true
                                          }
                               ];
  </code></pre>
  
  <p>Based on this, I am rendering columns in a table in markup.</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
            &lt;tr&gt;
                          &lt;th ng-repeat="column in columns" ng-if="column.selected &amp;&amp; column.sortable" ng-click="toggleSort(column.name)" class="sortable"
                              ng-class="{sorting_desc:sortBy===column.name &amp;amp;&amp;amp; sortOrder==='DESC',
                                         sorting_asc:sortBy===column.name &amp;amp;&amp;amp; sortOrder==='ASC'
                                        }"&gt;
                              {{column.displayName}}
                          &lt;/th&gt;
                          &lt;th ng-repeat="column in columnSettings" ng-if="column.selected &amp;&amp; !column.sortable"&gt;
                              {{column.displayName}}
                          &lt;/th&gt;
                      &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>So, basically, I want to do</p>
  
  <pre><code>  if column is selectable 
         check if sortable 
                 apply ng-class and ng-click on td element.
               else
                 render normal td element
  </code></pre>
  
  <p>Above code works but it first renders all sortable columns and then non-sortable columns.</p>
  
  <p>Eg:  it renders
       Column A   Column C   Column B</p>
  
  <p>but I want it to render
       Column A   Column B   Column C</p>
  
  <p>Any help is greatly appreciated. Thanks.</p>