angularjs + foundation orbit

Question

Hi I want to fill content for Foundation orbit slider dynamically using angular like:

<div class="moreGamesArea">
    <ul class="orbit" data-orbit>
        <li ng-repeat="games in catalogGames">
            <div>{{games[0]}}</div>
        </li>
    </ul>
</div>

But it doesn't initialize slider correctly. In dom-model I see 3 elements <li> as it should be - so angular works ok, but slider - has only one slide! whats wrong? Thanks

Answer 1

First. You need to create a directive.

.directive('afterRenderRepeat', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
        $(document).foundation();
    }
 };
})

Second. Call it in section ng-repeat.

<div class="moreGamesArea">
    <ul class="orbit" data-orbit>
        <li ng-repeat="games in catalogGames" data-after-render-repeat>
            <div>{{games[0]}}</div>
        </li>
    </ul>
</div>

The Directive has helped me to release foundation 5.