Faire trois colonnes avec ng-repeat

Bonjours à tous,

Quelque chose me dépasse. Je travail avec angular et je souhaite afficher une liste de films. Pour ce faire j'utilise une carte de présentation de mon framework CSS materialize.

J'aimerais que les élements affichés occupent 1/3 de l'écran chacun. J'ai essayé la fonction native de materialize c'est-à-dire class="col s6 m6" sans succès et essayé ensuite un truc du genre {'white-space': 'nowrap'}, {'width': '33.33333%', 'margin-left': '0;'} mais cela ne fonctionne pas.

Voici mon controller avec les donnés.

'use strict';

angular.module('content').controller('FilmController',
  function ($scope, $http)

  {

    $scope.filmlist = [{
      'name': 'Tout va bien',
      'synopsis': 'Maintenant qu’elle a l’âge légal d’accéder à son dossier à la banque de sperme, Joni décide avec son frère de retrouver le donneur dont ils sont tous deux issus. Ce dernier est rapidement séduit par les deux adolescents qui frappent à sa porte. Ils l’invitent alors à dîner pour la présentation aux parents : deux mamans qui vivent ensemble depuis vingt ans.',
      'realisateur': 'Lisa Cholodenko',
      'niveau': 'Secondaires 3 à 5 et Cégep',
      'date': '2010',
      'dure': '107 min',
      'img': 'img/film/toutva.jpg',

    }, ];

    $scope.title = 'Filmographie';

    $http.get('data/info.json').success(function (data) {
      $scope.data = data;
    });

  });

Voici ma vue.

<div class="row">
  <input type="text" ng-model="searchFilm" placeholder="Chercher un film" autofocus>
        <ul>
        <div class="col s12" ng-style="{'white-space': 'nowrap'}">
          <div class="card" ng-repeat="film in filmlist | filter:searchFilm" ng-style="{'width': '33.33333%', 'margin-left': '0;'}" >
            <div class="card-image">
              <img src="{{film.img}}">
            </div>
            <div class="card-content">
              <span class="card-title activator pink-text">{{film.name}}<i class="material-icons right pink-text">more_vert</i></span>
              <p class="justify">{{film.synopsis | limitTo:200}} ...</p>
            </div>
            <div class="card-action">
              <a href="#" class="black-text">En savoir plus</a>
            </div>
            <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">{{film.name}}<i class="material-icons right">close</i></span>
      <p>Date: {{film.date}} </br>Réalisation: {{film.realisateur}}</br> Durée: {{film.dure}} </br> Niveau: {{film.niveau}} </br>  Synopsis: {{film.synopsis}}</p>
    </div>
          </div>
        </div>
      </ul>
      </div>

    </div>