Dynamically added cards don't "restack"

[m10l]

On load (and using ng-if) the cards I load in appear as a neat stack, however when I swipe a card out and a replacement is added from my API, the card doesn't appear in the correct place. Is there something I need to call?

I've created a codepen to illustrate the issue - http://codepen.io/anon/pen/ByYJmz

[moQuez]

Same here, been looking around but so far I really don't now what to call or to refresh

[beauby]

+1

[albertoalcaraz]

The same here. I've tried several ways of adding the cards but they always end up with bad stacking position (exactly as in the codepen).

Any news on this?

[sagivf]

Same here, this is really frustrating. No feature is better then a broken one (or one missing basic functionality).

[kayzee]

I assume the "unshift" isn't giving you expected results? I tried using unshift and it seems to work for me.

cards = ['1', '2', '3'];
cards.splice(0, 1);  // cards = ['2', '3']
cards.unshift(angular.extend({}, '4'));  // cards = ['4', '2', '3'], however the Tinder cards show up in the order ['2', '3', '4'], which is bizarre

[wireblue]

I found the currently visible card was typically the last in the array, so adding freshly loaded cards to the front (aka. array.unshift) fixed it for me.

[wbowlin]

The issue is that the card zorder is set via sortCards which runs once after the ng-repeat first renders. One way to get around it is to just set the zorder yourself for each card via an inline style. You can see an example here: http://codepen.io/beoutside/pen/yNoWrR

[wbowlin]

Here's a fork of the original pen with the z-order styling applied. It also changes addCard to add cards to the end of the array instead of the beginning since the first card is shown at the top of the stack. Now you can see a new card come into view at the bottom of the stack.

http://codepen.io/beoutside/pen/qdPZvW

[elhamsarikhani]

have you tried this:
$scope.cards.push(angular.extend({}, newCard));