AngularJSのng-switchを使って、同じHTMLファイル内にある複数のHTMLテンプレートを選択して表示を切替える事ができます。
デモとコードサンプルはこちら。
別の記事で紹介したng-includeでも条件に応じてHTMLテンプレートの表示を切替える事ができますが、ng-includeはアクセスがあった時点で外部HTMLをダウンロードしてから表示します。
一方、ng-switchでは同じHTMLファイル内に記述されているのでアクセスに関わらずダウンロード済みで、選択に応じて表示を切替えます。
下記のようにラジオボタンで選択した値（変数switch）の値に応じてHTMLテンプレートが選択されて表示されます。
何も選択されていない場合は、ng-switch-defaultで指定した内容が表示されます。
<form>
<input type="radio" ng-model="switch" value="list">リスト
：
</form>
<div ng-switch on="switch">
<div ng-switch-when="table">
：
：テンプレートHTML
：
</div>
<div ng-switch-when="list">
：
：テンプレートHTML
：
</div>
<div ng-switch-when="accordion">
：
：テンプレートHTML
：
</div>
<div ng-switch-default>
上のラジオボタンで選択したフォーマットでデータが表示されます。
</div>
</div>