JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Order by</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.js"></script>
    <script type="text/javascript">
    (function(angular) {
    'use strict';
    angular.module('orderByExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.friends = [
          {name: 'John',   phone: '555-1212',  age: 10},
          {name: 'Mary',   phone: '555-9876',  age: 19},
          {name: 'Mike',   phone: '555-4321',  age: 21},
          {name: 'Adam',   phone: '555-5678',  age: 35},
          {name: 'Julie',  phone: '555-8765',  age: 29}
        ];
        $scope.predicate = 'age';
        $scope.userData = "";
        $scope.orderByFilter = function(userData){ 
           if (['age', 'phone', 'name'].indexOf(userData) >= 0) {
                   $scope.predicate = userData;
           }
        };
      }]);
    })(window.angular);
    </script>
</head>
<body ng-app="orderByExample">
 
    <div ng-controller="ExampleController">
      <table class="friends">
        <tr>
          <th>Name</th>
          <th>Phone Number</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:predicate">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>
    Predicate: <input ng-model="userData"/>
    <button ng-click="orderByFilter(userData)">Sort table</button>
    <br><br>
    <button ng-click="userData = 'constructor.constructor(\'alert(1)\')()'">Populate with 'XSS' PoC payload</button> 
    </div>
</body>
</html>