Multiple ionic Badges On Tabs Not Working

I am trying to add badges to my tabs in ionic, having one badge works fine using the following code:

 <nav class="tabs tabs-icon-bottom tabs-positive">
    <a class="tab-item" ng-click="showVenue('venue')"><i class="icon ion-waterdrop"></i>Venue</a>
    <a class="tab-item" ng-click="showComments()"><i class="icon ion-ios-chatbubble"></i>Comments</a>

    <a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-calendar"></i> Events</a>
    <a class="tab-item" ng-click="showMap()"><i class="icon ion-android-pin"></i>Map</a>

    <a class="tab-item" ng-click="showOffer()"><i class="icon ion-pizza"></i> Offers</a>
  </nav>

However adding one more badge on, seems to not display or messes up the current view, e.g.

Venue Comments

<a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-calendar"></i> Events</a>
<a class="tab-item" ng-click="showMap()"><i class="icon ion-android-pin"></i>Map</a>

<a class="tab-item" ng-click="showOffer()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-pizza"></i> Offers</a>

I'm I doing it right?