var app = angular.module('myApp',['ui.bootstrap']);
app.controller('myCtrl',function($scope) {
  $scope.status = {
    isFirstOpen: true,oneAtATime: true
  };
  $scope.cards = [{
    "id": 1,"bankid": 999999,"type": "VISA","no": "1234 5678 9012 3456","from": "01/06","expiry": "05/18","cvv": 345,"name": "Kallayi Basheer Shah"
  },{
    "id": 2,"bankid": 888888,"type": "Master","no": "3456 7890 1234 5678","from": "06/12","expiry": "07/16","cvv": 678,"name": "Shah Basheer"
  },{
    "id": 3,"bankid": 777777,"no": "9012 3456 1234 5678","from": "03/10","expiry": "08/17","cvv": 123,"name": "Basheer Shah Kallayi"
  }];
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
  <div class="row">
    <div class="col-md-12">
      <accordion close-others="status.oneAtATime">
        <accordion-group ng-repeat="card in cards">
          <accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
          <div class="row">
            <div class="col-sm-12">
              Name on card: {{card.name}}
              <br>Card type: {{card.type}}
            </div>
          </div>
        </accordion-group>
      </accordion>
    </div>
  </div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>