JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="fiddler">
    <div ng-controller="CustomAttributeDemo"> <span ng-repeat="attrs in attrArray">
        <span custom-attrs="attrs">Hello world</span><br />
</span>
    </div>
</div>

CSS

.blue {
    color: blue;
}
.red {
    color: red;
}

JavaScript

angular.module('fiddler', [])
    .directive('customAttrs', function ($compile) {
    return {
        restrict: 'A',
        replace: false,
        terminal: true,
        priority: 1000,
        scope: {
            customAttrs: '='
        },
        link: function link(scope, element, attrs) {
            for (var a in scope.customAttrs) {
                element.attr(a, scope.customAttrs[a])
            }
            element.removeAttr("custom-attrs");
        }
    };
})
    .controller('CustomAttributeDemo', function ($scope) {
    $scope.attrArray = [{
        'style': 'background-color: red',
            'class': 'blue'
    }, {
        'style': 'background-color: blue',
            'class': 'red'
    }];
})