JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app>
    
    <head></head>
    
    <body ng-controller="dialogWindows">As you can see I have a button which extends the alpeic array and the alpeic.length result displays correctly. Then I want the list of items below change their css styles accordin to the alepic.length value. I wrote a functions in the records array but they dont work. Please help, achieveing the relative css is crucial for the project.
        <button ng-click="compute()">Add</button>{{alpeic.length}}
        <div ng-repeat="record in records"> 
            <a href="{{record.link}}">
                <div ng-style="myStyle()" ng-class="{true: 'special', false: 'normal'}[alpeic.length > 5]">{{record.item}}
                </div>
            </a> 
        </div>
        <pre>XXX: {{records|json}}</pre>

    </body>

</html>

CSS

.special {
    color:red;
    font-size:30px;
    font-weight:bold;
}
.normal {
    color:green;
}

JavaScript

function dialogWindows($scope) {
    $scope.alpeic = [];

    $scope.myStyle = function () {
        var style = {};

        if ($scope.alpeic.length > 5) {
            style = {"font-size": 30 + 'px'};
        } else {
            style = {"font-size": ($scope.alpeic.length + 12) + 'px'};
        }
        return style;
    };


    $scope.compute = function () {
        $scope.alpeic.push(1);
        $scope.records = [{
            id: 0,
            link: $scope.alpeic.length > 5 ? "alpeic.html" : "",
            item: "This is item A"
        }, {
            id: 1,
            link: $scope.alpeic.length > 5 ? "alpeic.html" : "",
            item: "This is item B"
        }];
    }

    $scope.compute();

}