Change Bootstrap 3 column widths dynamically with AngularJS?

Question

How can I toggle the Bootstrap 3 grid system column widths (col-*) using AngularJS? I am trying to use ng-class as shown below, but it is not working. Any help will be greatly appreciated.

Here is the grid structure in my view:

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

Here is the variable in my controller:

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

The columns just stack as if I'm on a mobile device regardless of what I set the scope variable too.

Answer 1

Should be like this,

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