Within a directive, I have implemented some text and a video tag in the code below:

app.directive('ngAzuremediaplayer', function () {
    return {
        restrict: 'AE',
        priority: 10,
        link: function (scope, elem, attrs) {
            scope.hideapprove = attrs.hideapprove;
            scope.hidereject = attrs.hidereject;
            scope.hideinfo = attrs.hideinfo;
            scope.hidedelete = attrs.hidedelete;
            scope.hidecard = attrs.hidecard;
            scope.hidethumb = attrs.hidethumb;

            scope.$watch(attrs.ngBind, function (newvalue) {
                var myOptions = {
                    "nativeControlsForTouch": false,
                    "logo": { "enabled": false },
                    controls: true,
                    autoplay: false,
                    poster: scope.video.ThumbnailUri,

                }
                var myPlayer = null;
                if (scope.video.AMSUri != null) {
                    myPlayer = amp(document.getElementById(scope.video.RowKey), myOptions);
                    myPlayer.src([
                        {
                            "src": scope.video.AMSUri,
                            "type": "application/vnd.ms-sstr+xml"
                        }
                    ]);
                }
                else {
                    if (scope.video.RawVideoUri != null) {
                        myPlayer = amp(document.getElementById(scope.video.RowKey), myOptions);
                        myPlayer.src([
                            {
                                "src": scope.video.RawVideoUri,
                                "type": "video/mp4"
                            }
                        ]);
                    }
                }
            });
        },
        templateUrl: '/app/templates/VideoControl.html',
    }
});

Below is the template file used:

<div class="monster-admin-video monster-section-link">
<div class="monster-card">
    <div class="monster-card-content" ng-hide="hidecard">
        <h5 class="monster-card-title" style="margin-top: 0px;">{{video.ChannelName}}</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>
            <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">
        <a class="btn btn-success btn-sm" ng-hide="hideapprove" ng-click="vm.approve(video)"><i class="fa fa-check-circle-o fa-lg"></i></a>
        <a class="btn btn-info btn-sm" ng-hide="hideinfo" ng-click="vm.info(video)"><i class="fa fa-info-circle fa-lg"></i></a>
        <a class="btn btn-danger btn-sm" ng-hide="hidedelete" ng-click="vm.delete(video)"><i class="fa fa-trash fa-lg"></i></a>
        <a class="btn btn-default btn-sm" ng-hide="hidethumb" ng-click="vm.createThumbnail(video)"><i class="fa fa-camera fa-lg"></i></a>
    </div>
    <div class="monster-admin-video-caption">
        <div style="float:left">
            {{video.EncodingStatus}}
        </div> <div style="float:right">
            {{video.VideoProgress}}
        </div>
        <br />
        <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>

I am looking to update EncodingStatus and VideoProgress on an interval. The following function in regular JavaScript carries out this task:

function populateVideoStatus(data) {
    angular.forEach(data, function (video, key) {
        if (document.getElementById(video.RowKey) != null) {
            var encodingStatus = "";
            var videoProgress = ""
            switch (video.VideoStatusId) {
                case 0:
                    video.EncodingStatus = "Video Not Uploaded";
                    break;
                case 1:
                    video.EncodingStatus = "Video Uploading";
                    break;
                // Additional cases for different statuses...
            }

            if (video.VideoProgress == "100%") {
                video.VideoProgress = "";
            }

            var videoPlayer = document.getElementById(video.RowKey);
            var temp = videoPlayer.parentElement.parentElement.children[3];
            temp.children[0].innerHTML = video.EncodingStatus;
            temp.children[1].innerHTML = video.VideoProgress;
        }
    }, log);
    return data;
}

The above function is called with the following function call:

function getVideoForReview(call) {
    return datacontext.getVideosPage(1, vm.pageSize, vm.CurrentPage, call, '').then(function (data) {
        vm.Users = common.getVideoUsers(data);
        return vm.videos = common.populateVideoStatus(data);
    });
}

An interval function named doTimeout is invoked as follows:

function doTimeout() {
    getVideoForReview(true).then(function (data) {
        setTimeout(doTimeout, 5000);
    });
}

The intended behavior involves loading the directive and video upon page load, followed by periodic updates to the status and progress values without reinitializing the video player.

• Loading directive and video on page load
• Interval updates status (makes an API call) and updates DOM

Is it possible to achieve this functionality as desired?