AngularJS: different types of ng-class & class

HTML

<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<div 
    ng-controller="MainCtrl"
    class="just-a-class no-such-think-{{ data.nothing }} just-another-class"
    ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
>
1 interpolation - non-existing: Lorem ipsum dolor sit amet.
</div>
<hr />
<div 
    ng-controller="MainCtrl"
    class="just-a-class color-{{ data.color }} no-{{ data.color }}"
    ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
>
2 interpolations - existing (A): Lorem ipsum dolor sit amet.
</div>
<hr />
<div 
    ng-controller="MainCtrl"
    class="just-a-class {{'color'}}-{{ data.color }}"
    ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
>
2 interpolations - existing (B): Lorem ipsum dolor sit amet.
</div>

SCSS

.color-red { background: red;}

.font-small { font-size: 1em; }
.font-large { font-size: 3em; }

.no-red { color: Green; }

JavaScript

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

app.controller('MainCtrl', function ($scope) {

    $scope.data = {
        color: "red",
        size: 20
    };

});