title: Dynamic column class for Zurb-Foundation columns using AngularJS
body: <p>I'm using Foundations with AngularJS. I have a case where I'm trying to display things in columns using <code>ng-repeat</code>.</p>
  
  <pre><code>&lt;div class="four columns" ng-repeat="resultsObject in resultsObject"&gt;
      &lt;div ng-bind-html-unsafe="resultsObject"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine. But the issue is that the columns size could be anywhere from 1-5. And I'd like the display to update dynamically. So if there are only 2 columns, it would adjust to the correctly column display.</p>
  
  <pre><code>&lt;div class="{{$rootScope.columnCount}} columns" ng-repeat="resultsObject in resultsObject"&gt;
      &lt;div ng-bind-html-unsafe="resultsObject"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I try doing something like the above code, <code>{{$rootScope.columnCount}}</code> doesn't display anything. (I have verified that it does accurately store the correct column based on input.) It shows up in the source as <code>&lt;div class=" columns"&gt;</code> instead of <code>&lt;div class="3 columns"&gt;</code>.</p>
  
  <p>Is this an issue with using an angular variable and <code>ng-repeat</code> in the attribute? I've used <code>{{$index}}</code> within the class - so I know it can print things out within the class attribute.</p>