Ionic framework modal is only showing black dropdown without the actual content

Im doing an ionic hybrid app an i have a problem with the modal

when i invoke the modal.show() method i see the blackdropdown but not the actual modal content (i copy pasted the example from the docs). inspecting the modal object in chrome i see its well instanciated.

I think its related to my project setting so ill copy them here

index.html (placeholder)

 <body ng-app="myApp">      
<ion-pane>   
  <ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-pane>
</body>

the page that holds the button to invoke the modal

<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
    <div class="buttons" style="margin-top:20px;">    
    <button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
      <h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
  </div>
 </ion-header-bar>   
<ion-content style="margin-top:75px;">

  <div id="errors" class="center" style="color:red;text-align:center;">
    <ul>
      <li ng-repeat="error in errors">{{error}}</li>
    </ul>
  </div>
  <div class="center login-title">Transactions List</div>


<div class="row">
       <div class="col">Date</div>
       <div class="col">Transaction</div>
       <div class="col">Amount</div>
       <div class="col"></div>
</div>

<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
       <div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
       <div class="col">{{transaction.ProPayID}}</div>
       <div class="col">${{transaction.Amount}}</div>
       <div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>

and lastly my simple modal.html

  <div class="modal">
    <header class="bar bar-header bar-positive">
      <h1 class="title">Sample Modal</h1>
    </header>
    <ion-content has-header="true" padding="true">

      <p ng-repeat="data in boulderDataChanges">{{data}}</p>
      <button class="button" ng-click="fakeLogin()">Fake Login</button>
    </ion-content>
  </div>

As mentioned the controller is invoking it correctly but the view just shows black curtain without the modal markup

turns out that the problem was that i have a bootstrap css in my project and it killed the ionic modal css

when i removed this line from my index

<link href="css/bootstrap.min.css" rel="stylesheet">

it worked like a charm

btw reason im using this css is because im using the angular date picker widget