How to apply a class specially to the badge?

I am using Ionic/Angular and also animate.css to give some fancy touches.

At first I was using this type of tabs and everything was working properly

<a class="tab-item has-badge" href="#/app/bet-slip">
  <span class="badge badge-assertive animated"
  <i class="icon ion-code-download"></i>

but the requirements says that I need to use <ion-tabs></ion-tabs> and thats what I am trying.

In the first type of tabs above you can see that there is a <span> that actually holds a badge with an ng-class and at the end {{betSlipCount}}, that ng-class it is been applied every time that {{betSlipCount}} which is an integer changes thru a boolean named picksCount. now I am using the type of tabs I mentioned before and now I have:

<ion-tab title="BetSlip"

        <ion-nav-view name="about-tab"></ion-nav-view>


as you can see some stuff change there, the badege now is inside the same first tap I do not know how to apply the ng-class correctly in this case, and I need the same behavior, I need that class applied to the badge every time that the betSlipCount changes.

You can modify the CSS:

.bounceIn ~ .tab-item .badge {
  background-color: yellow !important;

I fix it already. help me here please How to put content within ion-tabs without the use of ng-router?