JSFiddle - React, Tailwind, and code Playground

HTML

<div id="abc" ng-app>
    <div ng-controller="MainCtrl">
        <p>Hello {{name}} !</p>
        <ul id="def">
            <li>Hard html !!! 0 : abc - 9</li>
            <li>1 : def - 6</li>
            <li>2 : ghi - 3</li>
            <li>3 : klm - 4</li>
            <li>4 : krs - 2</li>
            <li>5 : nop - 5</li>
            <li>6 : tuv - 7</li>
            <li>7 : wxy - 8</li>
            <li>8 : z.. - 1</li>
        </ul>
        <input type="radio" ng-model="sort" value="a" />a
        <input type="radio" ng-model="sort" value="b" />b
    
    
    <button ng-click="tryMe()">test</button>
    </div>
    
</div>

	

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

JavaScript

function MainCtrl ($scope, $compile) {
  $scope.name = 'World';
    $scope.sort = 'a';
    $scope.datas = [
        {a: 'abc', b: '9'},
        {a: 'def', b: '6'},
        {a: 'ghi', b: '3'},
        {a: 'klm', b: '4'},
        {a: 'nop', b: '5'},
        {a: 'krs', b: '2'},
        {a: 'tuv', b: '7'},
        {a: 'wxy', b: '8'},
        {a: 'z..', b: '1'}
    ];
      
      $scope.tryMe = function()
      {
        // ng-repeat="data in datas | orderBy:sort "
          
          $('#def li').remove();
          $('#def').append('<li ng-repeat="data in datas | orderBy:sort ">{{ $index }} : {{ data.a }} - {{ data.b }}</li>');
          $compile($('#def'))($scope);
      }
      }