title: Angularjs orderBy sorting issues - ie, sorts 10 before 8
body: <p>I'm working on this app that is supposed to sort py IP address, so to get around issues of soring by what is essentially a string I break the IP address into octets and attempt to sort by each octect consecutively. But I'm having some issues with Angularjs's "orderBy" function when applied to my data:</p>
  
  <pre><code>&lt;tr ng-hide="row.length" class="tablehover tr-list" ng-repeat="row in entries | filter:search | orderBy:['ipA','ipB','ipC','ipD']"&gt;
                  &lt;td class="table-item col-1 col"&gt;&lt;img ng-src="./img/{{row.health}}" class="status-color"&gt;&lt;/td&gt;
                  &lt;td class="table-item col-2 col text-ip"&gt;{{ row.ipaddr }}&lt;/td&gt;
                  &lt;td class="table-item col-3 col"&gt;{{ row.nickname }}&lt;/td&gt;
                  &lt;td class="table-item col-4 col text-dns"&gt;{{ row.dnsname }}&lt;/td&gt;
                  &lt;td class="table-item col-5 col text-type"&gt;{{ row.type }}&lt;/td&gt;
                  &lt;td class="table-item col-6 col"&gt;&lt;center&gt;&lt;img ng-src="./img/{{row.reserved}}" class="status-reserved"&gt;&lt;/center&gt;&lt;/td&gt;
                  &lt;td class="table-item col-7 col"&gt;&lt;div id="editBtn" class="flat icon" name="editBtn" ng-model="editBtn" type="button" ng-click="edit(row)"&gt;&lt;img src="./img/edit.png" class="inline-icon edit"&gt;&lt;/button&gt;&lt;/div&gt;
                  &lt;td class="table-item col-8 col"&gt;&lt;div id="deleteBtn" class="flat icon" name="deleteBtn" value="./img/delete.png" ng-click="delete(row)"&gt;&lt;img src="./img/cancel.png" class="inline-icon delete"&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;!-- these are for sorting purposes only --&gt;
                  &lt;td class="hidden"&gt;{{ row.subnet }}&lt;/td&gt;
                  &lt;td class="hidden"&gt;{{ row.location }}&lt;/td&gt;
                  &lt;td class="hidden"&gt;{{ row.vlan }}&lt;/td&gt;
                  &lt;td class="hidden"&gt;{{ row.notes }}&lt;/td&gt;
                  &lt;td class=""&gt;{{row.ipA}}.{{row.ipB}}.{{row.ipC}}.{{row.ipD}}&lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>In theory this is supposed to order like:</p>
  
  <pre><code>1.1.1.1
  8.8.8.8
  10.10.10.10
  </code></pre>
  
  <p>But in reality it orders like this:</p>
  
  <pre><code>1.1.1.1
  10.10.10.10
  8.8.8.8
  </code></pre>
  
  <p>I'd like to avoid having to take the octect and converting it to a 3-digit integer (ie, 001.001.001.001); I feel like this should be something easy and I've just screwed up something simple.</p>
  
  <p><strong>Things I've already tried:</strong></p>
  
  <p>forcing angular to see each octect as a number (doesn't work)</p>
  
  <pre><code>{{ row.ipA | number }}
  </code></pre>
  
  <p>converting each octect to a float when each new record is saved to the DB:</p>
  
  <pre><code>var octets = ($scope.ipaddr).split(".");
  $scope.ipA = parseFloat(octets[0]);
  $scope.ipB = parseFloat(octets[1]);
  $scope.ipC = parseFloat(octets[2]);
  $scope.ipD = parseFloat(octets[3]);
  </code></pre>
  
  <p>Thanks!</p>