modal popup one after selecting the first time
HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Product Name</th>
<th>BF/AF</th>
<th>M</th>
<th>A</th>
<th>E</th>
<th>N</th>
<th ng-model="TotalQuantity" class="ng-pristine ng-untouched ng-valid ng-empty">Total Quantity</th>
<th ng-model="Price" class="ng-pristine ng-untouched ng-valid ng-empty">Price</th>
<th ng-model="interaction" class="ng-pristine ng-untouched ng-valid ng-empty">Interaction</th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: product in products -->
<tr ng-repeat="product in products" class="ng-scope">
<td class="ng-binding">1</td>
<td class="ng-binding">1 AL</td>
<td class="ng-binding">AF</td>
<td class="ng-binding">1</td>
<td class="ng-binding">0</td>
<td class="ng-binding">0</td>
<td class="ng-binding">1</td>
<td class="ng-binding">
1
</td>
<td class="ng-binding">24</td>
<td><a data-toggle="modal" data-target="#myModal" data="1 AL" ng-click="getProductName(product.ProductID)">Details</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title ng-pristine ng-untouched...