My videogular html5 will not play my php content that is retrieved. Links unclickable

Currently, I am able to post and retrieve content from my php database. I am also able to play the demo links that comes with videogular in the video player. However, when i click the poster image of the retrieved php database video, it does not click and does not play in the Html 5 video player. Does anyone know how i can play php videos stored in my database (yes I know that’s wrong) with the html5 player?

Here is my code:

<?php require_once('conn.php'); ?>

<html>
<head>
<link href="css/site.css" rel="stylesheet" type="text/css">
<link href="css/videoPlaylist.css" rel="stylesheet" type="text/css">
<link href="css/videoangularplaylist.css" rel="stylesheet" type="text/css">   
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/videogular/videogular.js"> 
</script>
<script src="https://unpkg.com/[email protected]/dist/controls/vg-controls.js"></script>
<script src="https://unpkg.com/[email protected]/dist/overlay-play/vg-overlay-play.js"></script>
<script src="https://unpkg.com/[email protected]/dist/poster/vg-poster.js"></script>
<script src="https://unpkg.com/[email protected]/dist/buffering/vg-buffering.js"></script>
</head> 
<body>  
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
<div class="videogular-container">
    <videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url">
        <vg-media vg-src="controller.config.sources"
                  vg-tracks="controller.config.tracks">
        </vg-media>

        <vg-controls>
            <vg-play-pause-button></vg-play-pause-button>
            <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
            <vg-scrub-bar>
                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            </vg-scrub-bar>
            <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
            <vg-volume>
                <vg-mute-button></vg-mute-button>
                <vg-volume-bar></vg-volume-bar>
            </vg-volume>
            <vg-fullscreen-button></vg-fullscreen-button>
        </vg-controls>

        <vg-overlay-play></vg-overlay-play>
        <vg-buffering></vg-buffering>
        <vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
    </videogular>
    </div>




    <div class="playlist">
    <ul>
        <li><a ng-click="controller.setVideo(0)" target="_OnNow">Pale Blue Dot</a></li>
        <li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li>

    <?php
      $db = mysqli_connect("localhost", "root", "root", "myStylzTV");
      $sql = "SELECT * FROM videos";
      $result = mysqli_query($db, $sql);
      while ($row = mysqli_fetch_array($result)) {
      echo "<div id='img_div'>";
      echo "<img src='videos/".$row['image']."' >";
      echo "<p>".$row['text']."</p>"; 
      echo "<p>".$row['id']."</p>"; 
      echo "</div>";
     }
    ?>    
    </div>
    </div>
'use strict';
 angular.module('myApp',
    [
        "ngSanitize",
        "com.2fdevs.videogular",
        "com.2fdevs.videogular.plugins.controls",
        "com.2fdevs.videogular.plugins.overlayplay",
        "com.2fdevs.videogular.plugins.poster",
        "com.2fdevs.videogular.plugins.buffering"
    ]
  )
  .controller('HomeCtrl',
    ["$sce", "$timeout", function ($sce, $timeout) {
        var controller = this;
        controller.state = null;
        controller.API = null;
        controller.currentVideo = 0;

        controller.onPlayerReady = function(API) {
            controller.API = API;
        };

        controller.onCompleteVideo = function() {
            controller.isCompleted = true;

            controller.currentVideo++;

            if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0;

            controller.setVideo(controller.currentVideo);
        };

        controller.videos = [
         {
            sources: [
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
            ]
        },
           {
            sources: [
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"}
            ]
        },
    ];

        controller.config = {
            preload: "none",
            autoHide: true,
            autoHideTime: 3000,
            autoPlay: true,
            sources: controller.videos[0].sources,
            plugins: {
                poster: "http://www.videogular.com/assets/images/videogular.png"
            }
        };

        controller.setVideo = function(index) {
            controller.API.stop();
            controller.currentVideo = index;
            controller.config.sources = controller.videos[index].sources;
            $timeout(controller.API.play.bind(controller.API), 100);
        };
    }]
 );
</script>
</body>
<?php error_reporting(-1); ?>   
</html> 

Source: AngularJS