Angular: ng-repeat, ng-class and ng-style

HTML

<div ng-controller="myCtrl as ctrl">
    <span ng-repeat="i in [0,1,2,3,4,5]" 
          ng-class="{'red': $index < 2}" >*</span>
        
    <hr/>

    <span ng-repeat="i in [0,1,2,3,4,5]" 
          ng-class="ctrl.getClass($index)" >*</span>
        
    <hr/>
    
    <span ng-repeat="i in [0,1,2,3,4,5]"
           ng-style="{'color': ($index < 3? 'red': 'black'}" >*</span>
    
    <hr/>     
    
    <span ng-repeat="i in [0,1,2,3,4,5]"
           ng-style="ctrl.getColor($index)" >*</span>
    
</div>

CSS

.red {
    color: red
}

JavaScript

angular.module('myApp',[])

.controller('myCtrl', function(){
     
    this.getClass = function(index) {
        var myClass = (index < 2) ? 'red' : null;
        return myClass;
    }      
        
    this.getColor = function(index) {
        var styles = {}
        styles.color = (index < 2) ? '#ff0000': '#000';
        return styles;
    }
    
})