使用AngularJS动态更改Bootstrap 3列宽？

Question

如何使用AngularJS切换Bootstrap 3网格系统列宽（col- *）？我正在尝试使用如下所示的ng-class，但它不起作用。任何帮助将不胜感激。

以下是我视图中的网格结构：

<div class="row">
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
</div>

以下是我的控制器中的变量：

$scope.columnWidth = "col-md-3"; //Toggle between "col-md-3" and "col-md-4"

无论我设置范围变量是什么，列都会堆叠，好像我在移动设备上一样。

Answer 1

应该是这样的，

  <div ng-class="columnWidth"></div>