使用范围变量全局更新CSS样式

我正在构建一个可以更改主题的应用程序.在这种情况下,主题只是改变应用程序中几个关键元素的颜色.

所以目前,在所有需要主题颜色的元素上,我已经给它们了css类has-main-color.

在控制器中,我从Web服务获取所需的颜色,并将其设置为范围为$scope.mainColor = color ;.

所有这些都可以正常工作,但是我遇到的问题是我找不到适用于将这种颜色应用到has-main-color类的方法.

目前,我正在尝试以下操作：

<style>
    .has-main-color {
        color: {{mainColor}}
    }
</style>

你可能猜到,这不行.

那么使用AngularJS来解决这个问题的最好办法是什么？

<input type="button" value="set" ng-click="myStyle={Color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStylE}}</pre>