JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="UM">

<div class="container">    
    <div ng-view></div>
</div>
</div>

JavaScript

var controllers = {};
var app = angular.module('UM',[]);

//routing
app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        template: '<a href="#" class="btn">home</a><input ng-model="sorter" /><table  class="table table-striped">    <thead>        <th >            <a href="" ng-click="sortList(\'id\')">ID</a>        </th>        <th>            <a href="" ng-click="sortList(\'firstname\')">First Name</a>        </th>        <th>            <a href="" ng-click="sortList(\'lastname\')">Surname</a>        </th>        <th>            <a href="" ng-click="sortList(\'age\')">Age</a>        </th>        <th>           <a href="" ng-click="sortList(\'cars\')">cars</a>        </th>    </thead>    <tbody>        <tr ng-repeat="person in people | orderBy:sorter ">            <td>{{person.id | number}}</td>            <td>{{person.firstname}} </td>            <td>{{person.lastname}} </td>            <td>{{person.age | number}}</td>            <td>{{person.cars}} </td>        </tr>    </tbody></table>',
        controller: 'listCtrl'
    }).when('/test',{
        template: '<h6>{{people}}</h6>',
        controller: 'listCtrl'
    });
});

//user data
app.service('People', function() {
    var People = {};
    People.details = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
                      {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
                      {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]
    return People;
});

//list ctrl
controllers.listCtrl = function ($scope,People) {
    $scope.people = People.details;
    $scope.sortList = function(sortname) {
        $scope.sorter = sortname;
    }
}

//controllers
app.controller(controllers);