JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="ContactListCtrl">
<h1>AngularJS Sorting Example</h1>

<table class="contacts">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>

  <tr ng-repeat="contact in contacts | orderBy:['surname','name']">
    <td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td>
    <td ng-class-even="'even'">{{contact.telephone}}</td>
  </tr>
</table>
</div>

CSS

body { font:12px arial, sans-serif; line-height:1.6em; margin:0 auto; max-width:960px; }
h1, select, table { margin-bottom:20px; }
table { width:80%; }
th, td { padding:5px; text-align:left; vertical-align:top; }
th { background:#ccc; }
.even { background-color:#efefef; }

JavaScript

function ContactListCtrl($scope){
  $scope.contacts = 
  [
    { "name":"Simon", "surname":"Torvalds", "telephone":"1234 98765" },
    { "name":"Linus", "surname":"Torvalds", "telephone":"2345 87654" },
    { "name":"Frank", "surname":"Torvalds", "telephone":"3456 76543" }
  ];
};