AngularJS 1.5.x

angular
 .module('app', []);

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.min.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
    <script src="app.component.js"></script>
    <script src="ordinal.filter.js"></script>
  </head>
  <body>
    <app></app>
  </body>
</html>

/* Put your css in here */

var app = {
  template: `
    <div>
      <ul>
        <li ng-repeat="num in $ctrl.numbers">
          {{ num | ordinal }}
        </li>
      </ul>
    </div>
  `,
  controller() {
    this.numbers = [
      1,2,3,4,5,6,7,8,9,10,
      11,12,13,14,15,16,17,18,19,20
    ];
  }
};

angular
  .module('app')
  .component('app', app);

function ordinal() {
	return function(value) {
		var suffix = '';
		var last = value % 10;
		var specialLast = value % 100;
		if (!value || value < 1) {
			return value;
		}
		if (last === 1 && specialLast !== 11) {
			suffix = 'st';
		} else if (last === 2 && specialLast !== 12) {
			suffix = 'nd';
		} else if (last === 3 && specialLast !== 13) {
			suffix = 'rd';
		} else {
			suffix = 'th';
		}
		return value + suffix;
	};
}

angular
	.module('app')
	.filter('ordinal', ordinal);