Video Directive

HTML

<div ng-app="aMod" ng-controller="VideoDisplayController">
    <div video-display h264="{{h264Video}}">adf</div>
</div>

JavaScript

var module = angular.module("aMod", []);
module.directive("videoDisplay", function () {
    function VideoDisplayLink(scope, element, attr) {
        var h264Source;
        
        scope.$watch("h264", function (newVal, oldVal) {
            if (h264Source) {
                element.remove(h264Source);
            }                    
          
            var html = "<source src='" + newVal + "' type='video/mp4'>";
            h264Source = element.append(html);
            console.log(element.html());
        });            
    };
    
    return {
        restrict: "A",
        replace: true,
        template: "<video controls></video>",
        link: VideoDisplayLink,
        scope: {
            h264: "@h264"
        }
    };
});

function VideoDisplayController($scope) {
    //alert("controller started");
    $scope.h264Video = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
    console.log($scope);
};

module.controller("VideoDisplayController", VideoDisplayController);