Angularを使用するとき、適用するスタイルシート(.css)を動的に切り替えるにはどのようにすればよいでしょうか。
ここでは、serviceを利用してその仕組みを構築してみました。

切り替えのポイント

スタイルシートを動的に切り替えるにあたって、ポイントとなるのは以下の２点です。

スタイルシートのlinkにclassを割り当てる
スタイルシートを使用するかしないかは、linkのdisabled属性で制御する

上記２つのポイントにより、以下の動作が可能になります。

割り当てたclassを使ってスタイルシートをセレクトし、disabled属性の割り当て状況を動的に制御する

serviceの作成

実際のコードを見て見ましょう。
以下のコードのように、スタイルシートの有効/無効を切り替えるservice cssSwitch を定義します。

cssSwitch

  .factory('cssSwitch', function() {
    return {
      enableCss: function enableCss(className) {
      // 有効とするCSSのdisabled属性をはずす
      $('link.' + className).removeAttr('disabled');
    },
      disableCss: function disableCss(className) {
      // 無効とするCSSにdisabled属性をつける
      $('link.' + className).attr('disabled', 'disabled');
    }
    };
  })

このserviceを利用することで、以下のようにスタイルシートの使用状況を動的に制御することができます。

controller

  .controller('mainController', function($scope, cssSwitch){

    $scope.changeCss = function(name){
      cssSwitch.enableCss('style-a');
      cssSwitch.disableCss('style-b');
    };

  })

なお、linkには次のようにclassを割り当てておきます。

view

<link class="style-a" rel="stylesheet" href="style-a.css" />
<link class="style-b" rel="stylesheet" href="style-b.css" />

実行例

実際に動作するコードをPlunkerに作成したので、参考にしてみてください。
実行例

補足

この方法は、あらかじめ必要なスタイルシートがダウンロードされていることを前提としています。
そもそも余計なトラフィックを増やしたくない場合は、他の手法を検討するのが良いでしょう。