<div class="discount-tip"
     ng-bind="nextDiscount"
     ng-init="nextDiscount= '{{$product->discountBarDiscounts[0]->next_discount_description}}'">
    {{$product->discountBarDiscounts[0]->next_discount_description}}</div>


<ul class="product-discount-bar" ng-init="currentDiscount = nextDiscount">
    @foreach($product->discountBarDiscounts as $key => $discount)
        <li ng-click="
            @if($key+1 < count($product->discountBarDiscounts))
                nextDiscount = '{{$product->discountBarDiscounts[$key+1]->next_discount_description}}';
            @endif
                currentDiscount = nextDiscount;
                quantity = {{$discount->quantity_min}}"
            ng-class="{'active' : quantity >= {{$discount->quantity_min}} }"


            ng-mouseover="nextDiscount = '{{$discount->next_discount_description}}'"
            ng-mouseleave="nextDiscount = currentDiscount"
        >
            {{$discount->click_text}}

        </li>
    @endforeach
</ul>