title: Pop Up modal only works on first item in angularjs
body: <p>When i click the Details in table row Pop Up modal only works on first item.when i click second row details first one value is open.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Title of the document&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="table-responsive"&gt;
                          &lt;table class="table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;S.No&lt;/th&gt;
                                      &lt;th&gt;Product Name&lt;/th&gt;
                                      &lt;th&gt;BF/AF&lt;/th&gt;
                                      &lt;th&gt;M&lt;/th&gt;
                                      &lt;th&gt;A&lt;/th&gt;
                                      &lt;th&gt;E&lt;/th&gt;
                                      &lt;th&gt;N&lt;/th&gt;
                                      &lt;th ng-model="TotalQuantity" class="ng-pristine ng-untouched ng-valid ng-empty"&gt;Total Quantity&lt;/th&gt;
                                      &lt;th ng-model="Price" class="ng-pristine ng-untouched ng-valid ng-empty"&gt;Price&lt;/th&gt;
                                      &lt;th ng-model="interaction" class="ng-pristine ng-untouched ng-valid ng-empty"&gt;Interaction&lt;/th&gt;
  
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;!-- ngRepeat: product in products --&gt;&lt;tr ng-repeat="product in products" class="ng-scope"&gt;
                                      &lt;td class="ng-binding"&gt;1&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;1 AL&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;AF&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;1&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;0&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;0&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;1&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;
                                          1
  
                                      &lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;24&lt;/td&gt;
                                      &lt;td&gt;&lt;a data-toggle="modal" data-target="#myModal" data="1 AL" ng-click="getProductName(product.ProductID)"&gt;Details&lt;/a&gt;
                                          &lt;div class="modal fade" id="myModal" role="dialog"&gt;
                                              &lt;div class="modal-dialog"&gt;
  
                                                  &lt;!-- Modal content--&gt;
                                                  &lt;div class="modal-content"&gt;
                                                      &lt;div class="modal-header"&gt;
                                                          &lt;h4 class="modal-title ng-pristine ng-untouched ng-valid ng-binding ng-empty" ng-model="WProductName"&gt; Suppository related warnings&lt;/h4&gt;
                                                          &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="modal-body"&gt;
                                                          &lt;div class="firstone"&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/alcohol.png" title="Alcohol"&gt;
                                                                  &lt;span class="ng-binding"&gt;CAUTION&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/pregnancy.png" title="Pregnancy"&gt;
                                                                  &lt;span ng-model="Pregnancy" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;PROBABLY SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/lactation.png" title="Lactation"&gt;
                                                                  &lt;span ng-model="Lactation" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/driving.png" title="Driving"&gt;
                                                                  &lt;span ng-model="Driving" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/kidney.png" title="Kidney"&gt;
                                                                  &lt;span ng-model="Kidney" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;CAUTION&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/liver.png" title="liver"&gt;
                                                                  &lt;span ng-model="Liver" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="modal-footer"&gt;
                                                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
  
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;!-- Modal --&gt;
  
  
                                  &lt;/tr&gt;&lt;!-- end ngRepeat: product in products --&gt;&lt;tr ng-repeat="product in products" class="ng-scope"&gt;
                                      &lt;td class="ng-binding"&gt;2&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;Practin&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;AF&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;1&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;0&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;1&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;1&lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;
                                          1
  
                                      &lt;/td&gt;
                                      &lt;td class="ng-binding"&gt;26&lt;/td&gt;
                                      &lt;td&gt;&lt;a data-toggle="modal" data-target="#myModal" data="Practin" ng-click="getProductName(product.ProductID)"&gt;Details&lt;/a&gt;
                                          &lt;div class="modal fade" id="myModal" role="dialog"&gt;
                                              &lt;div class="modal-dialog"&gt;
  
                                                  &lt;!-- Modal content--&gt;
                                                  &lt;div class="modal-content"&gt;
                                                      &lt;div class="modal-header"&gt;
                                                          &lt;h4 class="modal-title ng-pristine ng-untouched ng-valid ng-binding ng-empty" ng-model="WProductName"&gt; Suppository related warnings&lt;/h4&gt;
                                                          &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="modal-body"&gt;
                                                          &lt;div class="firstone"&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/alcohol.png" title="Alcohol"&gt;
                                                                  &lt;span class="ng-binding"&gt;CAUTION&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/pregnancy.png" title="Pregnancy"&gt;
                                                                  &lt;span ng-model="Pregnancy" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;PROBABLY SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/lactation.png" title="Lactation"&gt;
                                                                  &lt;span ng-model="Lactation" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/driving.png" title="Driving"&gt;
                                                                  &lt;span ng-model="Driving" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/kidney.png" title="Kidney"&gt;
                                                                  &lt;span ng-model="Kidney" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                              &lt;div class="alcohol"&gt;
                                                                  &lt;img src="/img/Interaction/liver.png" title="liver"&gt;
                                                                  &lt;span ng-model="Liver" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty"&gt;SAFE&lt;/span&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="modal-footer"&gt;
                                                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
  
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;!-- Modal --&gt;
  
  
                                  &lt;/tr&gt;&lt;!-- end ngRepeat: product in products --&gt;
                              &lt;/tbody&gt;
                              &lt;tfoot&gt;
                                  &lt;tr&gt;
                                      &lt;th colspan="8" style="font-size: 1.5em;"&gt;Total&lt;/th&gt;
                                      &lt;th id="right" colspan="3" style="font-size: 1.5em;"&gt;&lt;span ng-bind="total" style="margin-left: -1em;" class="ng-binding"&gt;&lt;/span&gt;&lt;span class="ng-binding"&gt; ₹ 50&lt;/span&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/tfoot&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>DEMO LInk: <a href="https://jsfiddle.net/ivinraj/3ydpc92z/1/" rel="nofollow noreferrer"><strong>Demo Link</strong></a></p>