How to set ng-class equal to some value in Angularjs?

<!DOCTYPE html>
<html ng-app>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="main.css" />
  </head>
  
  <body ng-controller="Ctrl">
    <ul>
      <li ng-repeat="area in areas" ng-class="'items-count-' + areas.length">{{area.size}}</li>
    </ul>
  </body>
  
  
</html>

function Ctrl($scope) {
  $scope.areas = [
    {size: 10},
    {size: 20},
    {size: 30}
  ];
}

.items-count-1 {
  color: red;  
}
.items-count-2 {
  color: blue;  
}
.items-count-3 {
  color: green;  
}