Bootstrap modal with table row

Question

I have an HTML table on my page as shown below where the rows are filled ng-repeat

<tr ng-repeat="sermon in sermons | filter:searchText">
    <td align="center">{{ sermon.sermondate }}</td>
    <td>
        <b>{{ sermon.sermontitle }}</b>
        <p>{{ sermon.sermonsummary }}</p>
    </td>
    <td align="center">
        <a ng-href="" data-target="#myModal" data-toggle="modal" data-sermontitle="{{ sermon.sermontitle }}" data-sermonlink="{{ sermon. sermonlink }}">
    <i class="fa fa-youtube-play fa-2x"></i>
    </a>
    <td align="center" class="download"><i class="fa fa-download fa-2x"></i></td>

My jquery code is below

$(document).ready(function () {
  $('#myModal').on('shown.bs.modal', function (event) { 
        console.log('button clicked.');
        // Button that triggered the modal
        var button = $(event.relatedTarget) 

        // Extract info from data-* attributes
        var sermontitle = button.data('sermontitle') 
        var sermonlink = button.data('sermonlink')

        // Update the modal content.
        var modal = $(this)
        modal.find('.modal-title').text(sermontitle)
        modal.find('iframe').attr('src',sermonlink);
    });
});

And here is my HTML for modal

    <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Youtube video should play here.</p>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/dmBWI5EZyHM" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

What I wanted to achieve is when the user clicks on the youtube link in the row of the table, the modal will be displayed using the youtube link passed in the data attribute.

After spending the whole day exploring this, I still fail to do this.

Here is my sample JSON sermon

---

[ { "id" : "1",
    "sermondate" : "2015-09-27",
    "sermonlength" : "39",
    "sermonlink" : "https://www.youtube.com/watch?v=Za4jjt80kLw",
    "sermonsummary" : "A must watch.",
    "sermontitle" : "Sunday Morning Service Sep 27 2015",
    "sessionid" : "1",
    "viewcount" : "46"
  },
  { "id" : "2",
    "sermondate" : "2015-10-11",
    "sermonlength" : "54",
    "sermonlink" : "https://www.youtube.com/watch?v=PXj8nY0oOF8",
    "sermonsummary" : "This sermon deals with the important issues of Christian walk.",
    "sermontitle" : "Bible Study 11th October",
    "sessionid" : "3",
    "viewcount" : "16"
  },
  { "id" : "4",
    "sermondate" : "2015-10-11",
    "sermonlength" : "41",
    "sermonlink" : "https://www.youtube.com/watch?v=91xBFt3de1s",
    "sermonsummary" : "This sermon was preached by pastor James Sipes in Sunday Morning church service on 11th October 2015.",
    "sermontitle" : "Sunday Morning Service Oct 11 2015",
    "sessionid" : "1",
    "viewcount" : "13"
  },
  { "id" : "5",
    "sermondate" : "2015-10-18",
    "sermonlength" : "17",
    "sermonlink" : "https://www.youtube.com/watch?v=5jnEoBChZ9I",
    "sermonsummary" : "This sermon was preached by Kurt Robertson in Sunday school service on 18th October 2015.",
    "sermontitle" : "Missionary to North Korea - Oct 18 2015",
    "sessionid" : "1",
    "viewcount" : "18"
  },
  { "id" : "6",
    "sermondate" : "2015-10-18",
    "sermonlength" : "46",
    "sermonlink" : "https://www.youtube.com/watch?v=aRf8X7Zgt8c",
    "sermonsummary" : "This sermon was preached by Kurt Robertson in Sunday Mornign church service on 18th October 2015.",
    "sermontitle" : "Sunday Morning Service Oct 18 2015",
    "sessionid" : "1",
    "viewcount" : "6"
  },
  { "id" : "7",
    "sermondate" : "2015-11-01",
    "sermonlength" : "50",
    "sermonlink" : "https://www.youtube.com/watch?v=hnF8EARhTwA",
    "sermonsummary" : "This sermon was preached by Pastor JAmes Sipes in Sunday school service on 1st November 2015.",
    "sermontitle" : "Bible Study Nov 01 2015",
    "sessionid" : "1",
    "viewcount" : "5"
  }
]

Answer 1

Go in the opposite direction - use clickon the button / link itself:

$('a[data-toggle="modal"]').on('click', function() {
    $(".modal-title").text($(this).attr('data-sermontitle'));
    $("#player").attr('src', $(this).attr('data-sermonlink')+'?autoplay=1');
}) 

autoplay , , <iframe> a id, player, .

→ http://jsfiddle.net/32u97dau/

plnkr/ angular -demo, sermons "sermon in sermons | filter:searchText" - , .

---

$(document).ready() angular. ready() , , angular -. , , , "" DOM, ng-repeat. "" $timeout:

$timeout(function() {
  //what you do in $(document).ready()
})

, $(document).on('click', 'a[data-toggle="modal"]',... , . , document, a[data-toggle="modal"] - / , angular.

jQuery - , , jQuery, . angular ui bootstrap angular ( ) angular. $timeout ng-click jQuery.