Angularjs HTML5 Video onended

Question

I am loading html5 mp4 video and I want to trigger function from angular scope when video end. I tried below simple code but onended event cannot find the function in angular scope.

HTML

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir onended="vidEnded()">

Angularjs function added in main controller. onended event triggered but function is undefined

$scope.vidEnded = function(){
        console.log('vid ended')
    }

Also tried adding function in directory like this but the function is not triggered.

.directive('vidDir', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            console.log(elem)
            elem.onended = function(){
                console.log('vid ended')
            } 
        }
    };
}]);

Answer 1

I believe the following code would achieve what you desire.

<video controls="controls" autoplay="true" ng-show="showVideo" ng-src="{{vidSrc}}" vid-dir (ended)="vidEnded()">