How to use two ng-repeats in one table row?
<p>I am struggling with some refactoring of a grid to a table. In the current grid I will have two ng-repeats to load the correct data from a controller. 
See below: </p>

<pre><code>&lt;div class="container-fluid"&gt;
&lt;br/&gt;
&lt;div class="row"&gt;
    &lt;div class="col-xs-3"&gt; &lt;b&gt;{{ 'title' | translate}}&lt;/b&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;b&gt;{{ 'date' | translate}}&lt;/b&gt;&lt;/div&gt;
    &lt;div class="col-xs-3"&gt;&lt;b&gt;{{ 'time' | translate}}&lt;/b&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;b&gt;{{ 'EventState' | translate}}&lt;/b&gt;&lt;/div&gt;
    &lt;div class="col-xs-2"&gt;&lt;/div&gt;
    &lt;br/&gt;
    &lt;br/&gt;
&lt;/div&gt;
&lt;div class="row editEventTabs" ng-repeat="event in profileCtrl.user._events"&gt;
    &lt;div ng-repeat="date in profileCtrl.eventDates(event, profileCtrl.user) "&gt;
        &lt;div class="col-xs-3"&gt;&lt;a href="/#/eventProfile/{{event._id}}/{{date}}"&gt;{{event.title}}&lt;/a&gt;&lt;/div&gt;
        &lt;div class="col-xs-2"&gt;{{ date }}&lt;/div&gt;
        &lt;div class="col-xs-3"&gt;&lt;i&gt;{{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}&lt;/i&gt;&lt;/div&gt;
        &lt;div class="col-xs-2"&gt;{{ event.eventStatus | translate }}&lt;/div&gt;
        &lt;button class="col-xs-2 btn btn-default" ng-click="profileCtrl.unsubscribe(event, date)"&gt;{{ 'unSubscribe' | translate }}&lt;/button&gt;
        &lt;br/&gt;
        &lt;br/&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>The first ng-repeat will load the events, and some of the events are recurring, so I want to show all the events from a recurring event below each other. The second ng-repeat will load the date which belong to a specific event.  </p>

<p>Now i want to refactor this in a table, but I can't figure out how to get the data from the two ng-repeats in one table row..</p>

<p>I need a table because of some data I want to sort / filter, which is currently not possible in a grid. (If I am right) </p>

<p><strong>UPDATE</strong></p>

<p>First, thanks all for the answer already. 
The output must be something like this: 
<a href="http://i.stack.imgur.com/feN0I.jpg" rel="nofollow">Lay out</a></p>

<p>So, the link of the event and the date are retrieved from the controllers.</p>

<p><strong>UPDATE 2</strong></p>

<p>It is working now. With this code: </p>

<pre><code>&lt;div class="container-fluid"&gt;

&lt;table class="table"&gt;
    &lt;tr&gt;
        &lt;th&gt; {{ 'title' | translate}} &lt;/th&gt;
        &lt;th&gt; {{ 'date' | translate}} &lt;/th&gt;
        &lt;th&gt; {{ 'startTime' | translate}} &lt;/th&gt;
        &lt;th&gt;{{ 'endTime' | translate }}&lt;/th&gt;
        &lt;th&gt; {{ 'state' | translate}} &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;

    &lt;tbody ng-repeat="event in profileCtrl.user._events  "&gt;
        &lt;tr ng-repeat="date in profileCtrl.eventDates(event, profileCtrl.user) | orderBy: date " &gt;
            &lt;td&gt;&lt;a href="/#/eventProfile/{{event._id}}/{{date}}"&gt;{{event.title}}&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt; {{date }}
            &lt;/td&gt;
            &lt;td&gt;
                {{ event.start | date:'HH:mm' }}
            &lt;/td&gt;
            &lt;td&gt;
                {{ event.end | date:'HH:mm' }}&lt;/td&gt;
            &lt;td&gt;
                {{ event.eventStatus | translate }}
            &lt;/td&gt;
            &lt;td&gt;
                &lt;button class="btn btn-default" ng-click="profileCtrl.unsubscribe(event, date)"&gt;{{ 'unSubscribe' | translate }}&lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p></p>

<p>Thanks all for the help! </p>