AngularJS Library only works after I refresh the page, if I change states it stops working

Question

I'm using a library video.js . I used the example code from the website:

<video id="my-video" class="video-js vjs-default-skin" controls 
preload="auto" width="1000" height="600" data-setup='{ "playbackRates": [1, 
1.5, 2] }'>
         <source src="file\undefined\1501667652598.mp4" type="video/mp4">
</video>

and added the scripts/css:

<link href="http://vjs.zencdn.net/6.2.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/6.2.4/video.js"></script>

When I straight refresh the page, it works fine. But if I change states, it defaults to the regular video player. What could be the problem I'm facing?

States definition looks like that:

angular.module("pamm").config(function ($stateProvider) {
    $stateProvider
        .state("user.topic", {
            url: "/topic",
            views: {
                "content@user": {
                    templateUrl: "feature/user/topic/topic-list.html"
                }
            },
            params: {
                section: null,
                type: null
            }
        })
        .state("user.topic.details", {
            url: "/details/:id",
            views: {
                "content@user": {
                    templateUrl: "feature/user/topic/topic-details.html"
                }
            },
            params: {course: null}
        })
        .state("user.topic.result", {
            url: "/result",
            views: {
                "content@user": {
                    templateUrl: "feature/user/topic/topic-result.html"
                }
            }
        })
});

Answer 1

You need to setup your player manually by calling its function if the <video> tag is only added after the page load complete.

The reason is video.js will scan your HTML and setup any existing <video> tags automatically, but unfortunately it cannot watch changes in your HTML when angular updates it. ( reference )

You can add the manual setup code inside a route controller.

Answer 2

Just put your code inside this:

jQuery.noConflict();
        (function ($) {

       //your code

})(jQuery);