title: AngularJS orderBy Function With No Sorting
body: <p>I am attempting to use a custom orderBy function.  Initially, I want the data to appear in the order it was added to <code>$scope.rows</code>, and only after clicking on a column heading should it order by a specific property.  Here's my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/S8M4c/" rel="nofollow">http://jsfiddle.net/S8M4c/</a></p>
  
  <p>Here's my view:</p>
  
  <pre><code>&lt;table ng-app ng-controller="ctrl"&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;a ng-click="orderBy = 'id'"&gt;ID&lt;/a&gt;&lt;/th&gt;
          &lt;th&gt;&lt;a ng-click="orderBy = 'name'"&gt;Name&lt;/a&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="row in rows | orderBy:mySort"&gt;
          &lt;td&gt;{{row.object.id}}&lt;/td&gt;
          &lt;td&gt;{{row.object.name}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here's my controller:</p>
  
  <pre><code>function ctrl($scope)
  {
      // Initially, we don't sort by anything
      $scope.orderBy = "";
      $scope.rows = [];
  
      // Add some rows
      for(var i = 10;i &lt; 30;i++)
      {
          $scope.rows.push({settings: {foo: true}, object: {id: i, name: "Name " + i}})   
      };
  
      $scope.mySort = function(row)
      {
          if($scope.orderBy != "")
          {
              return row.object[$scope.orderBy];
          }
  
          // What do I return here??
          return "";
      }
  }
  </code></pre>
  
  <p>In the case that <code>$scope.orderBy</code> isn't set and I want to return <code>$scope.rows</code> in it's original order, what do I return in <code>$scope.mySort</code>?  I cannot <code>return row.object.id</code> because the rows are not guaranteed to be added in order of their ID.  Running my code as is on Chrome 32, the first row that appears has an ID of 20, which is the halfway row.</p>