JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Demo" ng-controller="DemoController">
<h1>User-Friendly Sort Of Alpha-Numeric Data In JavaScript</h1>

    <ul>
        <li ng-repeat="file in files | orderBy:[natural('name'),'-id']">{{ file.name }} ({{file.id}})</li>
    </ul>
    <form ng-submit="saveFile()">
        <input type="text" ng-model="form.name" size="20" />
        <input type="submit" value="Add File" />
    </form>
</div>

JavaScript

var app = angular.module("Demo", []);

app.run(["$rootScope", function($rootScope) {
	var natValue = function (value) {
        var padding = '00000000000000000000'
        value = value.replace(/(\d+)((\.\d+)+)?/g, function ($0, integer, decimal, $3) {
            if (decimal !== $3) {
                // treat as a series of integers,
                // rather than a decimal
                return $0.replace(/(\d+)/g, function ($d) {
                    return padding.slice($d.length) + $d
                });
            } else {
                decimal = decimal || ".0";
                return padding.slice(integer.length) + integer + decimal + padding.slice(decimal.length);

            }
        });
		return value;
    };
	$rootScope.natural = function (field) {
        return function (item) {
            return natValue(item[field]);
        }
    };
}]);

app.controller("DemoController", ['$scope', function ($scope) {
    $scope.files = [{
        id: 1,
        name: "kittens-1.jpg"
    }, {
        id: 2,
        name: "kittens-2.jpg"
    }, {
        id: 3,
        name: "kittens-12.jpg"
    }];

    $scope.form = {
        name: "kittens-3.jpg"
    };

    $scope.saveFile = function () {
        if (!$scope.form.name) {
            return;
        }
        addFile($scope.form.name);
    };

    var addFile = function (name) {
        $scope.files.push({
            id: (new Date()).getTime(),
            name: $scope.form.name
        });
    };
}]);