ng-src not working with video tag in angularjs

Question

<span ng-repeat="x in pics.files">
    <video ng-src="img/gallery_vid/{{x}}" height="200px" width="200px" class="mt-2" controls>
    </video>
</span>

ng-src not working with video tag, I will be happy if someone can be of help to me. The videos aren't playing, I searched online for a solution I saw this but I didn't get it. Thanks in advance

Answer 1

Controller:

(function() {
    'use strict';
        var app = angular.module('videoExample', []);
        app.controller('videoExampleController', ['$scope', videoExampleController]);

    function videoExampleController($scope){
       $scope.videoUrl = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
       $scope.videoMimeType = 'video/mp4';
    }
 })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app="videoExample" ng-controller="videoExampleController">
<span>
    <video height="300px" width="300px" class="mt-2" controls autoplay>
<source src="{{videoUrl}}" type="{{videoMimeType}}"/>Your browser does not support HTML5 video
    </video>
</span>
</div>