Directive to load video file in ng-repeat

I have a directive that I am working on that will load a video located in Azure Media Services into Dash Player and play. There will be multiple videos loaded so I need to load it into ng-repeat, here is the html that has the main loop

<div class="row">
     <div class="col-xs-6 col-sm-4 monster-admin-video-wrapper" ng-repeat="video in vm.videos | orderBy: 'Title' | filter: VideoFilter ">
           <ng-azuremediaplayer hideapprove="true"></ng-azuremediaplayer>
     </div>
 </div>

and the Directive

app.directive('ngAzuremediaplayer', function ($compile) {
    retu {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            scope.hideapprove = attrs.hideapprove;
            scope.hidereject = attrs.hidereject;
            scope.hideinfo = attrs.hideinfo;
            scope.hidedelete = attrs.hidedelete;

        },
        templateUrl: '/app/templates/VideoControl.html',
    }
});
});

And finally the template file

<div class="monster-admin-video monster-section-link">
<div class="monster-card">
    <div class="monster-card-content">
        <h5 class="monster-card-title" style="margin-top: 5px;">{{video.ChaelName}}</h5>
    </div>
    <div class="monster-admin-video-player embed-responsive embed-responsive-16by9" id="">
        <video id="{{video.RowKey }}" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls data-setup='{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}'>
            <source src="{{vm.trustSrc(video.BlobUri)}}"  />
            <p class="amp-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
            </p>
        </video>       
    </div>
    <div class="monster-admin-action-buttons" style="margin-top: 10px;">
        <a class="btn text-success" ng-hide="hideapprove" ng-click="vm.approve(video)"><i class="fa fa-check-circle-o"></i></a>
        <a class="btn text-waing" ng-hide="hidereject" ng-click="vm.reject(video)"><i class="fa fa-times-circle"></i></a>
        <a class="btn text-info" ng-hide="hideinfo" ng-click="vm.info(video)"><i class="fa fa-info-circle"></i></a>
        <a class="btn text-danger" ng-hide="hidedelete" ng-click="vm.delete(video)"><i class="fa fa-trash"></i></a>
    </div>
    <div class="monster-admin-video-caption">
        <p> {{video.EncodingStatus}}</p>
        <p class="lead monster-admin-video-title" ng-bind="video.Title" data-ellipsis></p>
        <p class="monster-admin-video-desc" ng-bind="video.Description" data-ellipsis></p>
    </div>
</div>

This code doesn't work (I have read that setting the source like this can be difficult. I want to be able to add the dash player programatically in a video tag, something like

var player = dashjs.MediaPlayer().create();
player.initialize(document.getElementById(scope.video.RowKey), scope.video.SaSLocator, false);

That way the video will be loaded properly at runtime. I am having some trouble plugging all this together (using a directive, hydrating a template file, and setting the source) all at the same time. I would appreciate a little guidance on this and can update code if needed.