JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<div ng-controller="MyCtrl">
	<article class="card" ng-repeat="chapa in chapas">
		<button ng-click="open(chapa.bundle,chapa.espessura,chapa.classifica,chapa.codmercad)">Abrir modal</button>
		<div class="content">
			<h4 class="prod-nome">{{chapa.nome_merca}}</h4>
			<p class="prod-desc">Bundle: {{chapa.bundle}}</p>
		</div>
	</article>
</div>

<div ng-controller="MyCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">{{ dados.nome_merca }}</h3>
        </div>
        <div class="modal-body">
            <a href="#"
    	       class="pull-right btn btn-primary"
               ng-disabled="selectButton"
    	       ng-click="selecionar()"> Selecionar bundle </a>
    		<h3>Informaões Técnicas</h3>
	        <p><strong>Bundle:</strong> {{dados.bundle}}</p>
		    <p><strong>Classificacão:</strong> {{dados.classificacao}}</p>
		    <p><strong>Espessura:</strong> {{dados.espessura}}</p>
        </div>
    </script>
</div>

CSS

.cards { margin-top: 30px; }
.card {
	position: relative;
	float: left;
	box-shadow: 0 1px 2px #aaa;
	background: white;
	margin: 0 0 1rem 1rem;
	border-radius: 3px;
	width: calc(25.2% - 1.4rem);
	width: -webkit-calc(25.2% - 1.4rem);
 	width: -moz-calc(25.2% - 1.4rem);
	-webkit-user-select: none;
	-webkit-animation: fly-in-from-left .5s 1s ease both;
	transform-origin: top left;
}
.card:nth-child(even){
	animation-name:fly-in-from-right;
	animation-delay:1.1s;
	transform-origin:top right;
}
.card .content {
	position: relative;
	padding: 0 1rem 0 1rem;
	min-height: 86px;
}
.card .content .text { padding: 0 16px 0 16px; }
.prod-menu {
	cursor: pointer;
	float: right;
	margin-top: -30px;
}
.prod-nome {
	font-size: 16px;
	height: 40px;
	font-weight: bold;
}
.prod-desc { font-size: 14px; }
.galleryImage img {
	width: 100%;
	cursor: pointer;
}
span.galleryImage {
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
}
span.galleryImage input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 2%;
    height: 2%;
    -webkit-transition: all 0.5s ease-in-out;
}
span.galleryImage:hover input[type=checkbox],
span.galleryImage input[type=checkbox]:checked {
    top: 1%;
    opacity: 1;
    width: 10%;
    height: 10%;
    -webkit-transition: all 0.5s ease-in-out;
}

JavaScript

var app = angular.module('app',['ui.bootstrap']);
app.controller('MyCtrl',function ($rootScope, $scope, $modal) {
    $rootScope.selectedBundle = [];
	// Ao carregar a página puxa as chapas
    $scope.chapas = [{bundle:"757",
                      classifica:"E",
                      codmercad:"274",
                      espessura:"20",
                      nome_merca:"CRISTAL ONYX WHITE"
                     },
                     {bundle:"755",
                      classifica:"E",
                      codmercad:"274",
                      espessura:"20",
                      nome_merca:"CRISTALITA"
                     }
                    ];

    $scope.open = function (bundle, espessura, classificacao, codigo) {
    	$scope.items = [bundle, espessura, classificacao, codigo];
    	var modalInstance = $modal.open({
      		templateUrl: 'myModalContent.html',
      		controller: 'modalController',
      		resolve: {
		        items: function () {
		        	return $scope.items;
		        }
		    }
    	});
    }
});

// Controller que define todo o modal
app.controller('modalController', function($scope,$modalInstance, $rootScope, items){
    
	var info = {
    	cod: items[3],
    	bundle: items[0],
    	espessura: items[1],
    	classificacao: items[2]
    };
    
    var repetido = $rootScope.selectedBundle.indexOf(info) == -1
    
    // Se não encontrou, botão disable é ativado
    if (repetido)
        $scope.selectButton = false;
    $scope.dados = info;
    
    $scope.selecionar = function() {
		$rootScope.selectedBundle.push(info);
        console.log($rootScope.selectedBundle);
    	$modalInstance.close();
    }
});