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 class="{{record.className}}">{{record.item}}</div></a> 
        
        </div>
    </body>
</html>

CSS

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

JavaScript

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