Change source VideoJS using AngularJS with Ruby on Rails onClick

Question

I'm currently learning Angular.js and integrated it with Ruby on Rails,

I have a sample project that list all the Railscasts videos and displays the selected video on VideoJS.

Here's my current code:

home/index

<div ng-controller="ScreencastsCtrl">
  <div id="screencast-list-container" >
    <ul>
      <li ng-repeat="screencast in screencasts"
          ng-click="showScreencast(screencast, $index)">
        <h3 ng-class="{active: $index == selectedRow}">{{screencast.title}}
          <small>({{screencast.duration}})</small></h3>
      </li>
    </ul>
  </div>

  <div id="screencast-view-container" ng-show="selectedScreencast">
    <h2>{{selectedScreencast.title}}</h2>
    <p>{{selectedScreencast.summary}}</p>

    <%= video_player src: { mp4: "{{ selectedScreencast.video_url }}" }, controls: true , id: "player"%>

    <p>
      Published at {{selectedScreencast.published_at | date: 'mediumDate'}}
      - <a ng-href="{{selectedScreencast.link}}">{{selectedScreencast.link}}</a>
    </p>
  </div>
</div>

assets/javascripts/controllers

App.controller 'ScreencastsCtrl', ['$scope', 'Screencast', ($scope, Screencast) ->
  # Attributes accessible on the view
  $scope.selectedScreencast = null
  $scope.selectedRow        = null

  # Gather the screencasts and set the selected one to the first on success
  $scope.screencasts = Screencast.query ->
    $scope.selectedScreencast = $scope.screencasts[0]
    $scope.selectedRow = 0

  # Set the selected screencast to the one which was clicked
  $scope.showScreencast = (screencast, row) ->
    $scope.selectedScreencast = $scope.screencasts[row]
    $scope.selectedRow = row
]

In this code, when I select a Railscasts video on my listings, I able to change the content of

h3 (screencast.title)

Published at (selectedScreencasts.published_at)

I can change the videojs source on the onload on my page but when I clicked on Railscasts listings the video should change its source.