Building a content slider for my project with limited experience in AngularJS. Came across this plunker that fits perfectly. Check out the live version of my page here. It's in Russian, but you'll find the slider in the center - a section with 8 cards.
The issue: Slider is controlled by arrows below it, but clicking the red button inside a card updates the model and applies ng-enter and ng-leave classes to the parent container, triggering slider animation. How can I prevent these red buttons from applying these classes?
UPDATE: See this plunker illustrating the problem. The animation should be triggered by clicking on Prev and Next buttons, but it also happens when clicking "Choose" or "Chosen" links, which update the model.
This is the markup:
<body ng-controller="MainCtrl">
<div class="page-container">
<div class="gift-page" ng-class="direction" ng-repeat="page in gifts | partition: 6 | offset: currentPage | limitTo: 1">
<ul class="gift-list clearfix">
<li class="gift" ng-repeat="gift in page">
<div class="gift-item">
<div class="gift-details">
<h3>{{gift.title}}</h3>
<span class="points">{{gift.points}} points</span>
<a href="" class="buy" ng-show="!gift.ordered" ng-click="addToBasket(gift)">Choose</a>
<a href="" class="bought" ng-show="gift.ordered" ng-click="removeFromBasket(gift)">Chosen</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="controls">
<button ng-click="prev()">Prev</button>
<button ng-click="next()">Next</button>
</div>
</body>