Onclick of a video should open the popup box using angularjs
<p>Onclick of a video should open the popup window.In the popup window the video should be playing and should have an option for closing the popup window,if not needed.</p>

<p>Can anyone please help me out regarding this ...</p>

<p>My html :</p>

<pre><code>&lt;div class="container-fluid" ng-controller="videocontroller"&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h3&gt;
                &lt;b&gt;Video Segment&lt;/b&gt;
            &lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;div ng-show="videoSources.length"&gt;
                &lt;video width=176 height=99
                    style="margin-left: 70px; margin-right: 10px;"
                    ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index"
                    controls ng-src="{{videoSource | trustUrl}}"&gt;
                &lt;/video&gt;
                &lt;div  style="margin-left: 46px;"&gt;
                    &lt;button style="margin-left: 750px" ng-disabled="isFirstPage()"
                        ng-click="prevPage()"&gt;Previous&lt;/button&gt;
                    &lt;button style="margin-left: auto;" ng-disabled="isLastPage()"
                        ng-click="nextPage()"&gt;Next&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div ng-hide="videoSources.length"&gt;
                &lt;a href="#" ng-click='loadVideos()'&gt;Load videos&lt;/a&gt;
            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>My js:</p>

<pre><code>app.controller(
        'videocontroller',
        function($scope) {

            $scope.pageNum = 0;
            $scope.pageSize = 3;
            $scope.isFirstPage = function() {
                return $scope.pageNum === 0;
            };
            $scope.isLastPage = function() {
                return $scope.pageNum &gt;= Math.floor($scope.videoSources.length
                        / $scope.pageSize);
            };
            $scope.prevPage = function() {
                $scope.pageNum--;
            };
            $scope.nextPage = function() {
                $scope.pageNum++;
            };
            $scope.videoSources = [
                    'http://Video/Digital_Hiring.mp4',
                    'http://Video/Digital_Hiring.mp4',
                    'http://Video/Digital_Hiring.mp4',
                    'http://Video/Digital_Hiring.mp4',
                    'http://Video/Digital_Hiring.mp4' ];


        }).filter("trustUrl", [ '$sce', function($sce) {
    return function(recordingUrl) {
        return $sce.trustAsResourceUrl(recordingUrl);
    };
} ]).filter(
        'paginate',
        function() {
            console.log('creating paginate function', arguments);
            return function(inputArray, pageNumber, pageSize) {
                console.log('paginating', arguments);
                pageNumber = pageNumber || 0;
                pageSize = pageSize || 4;
                if (!Array.isArray(inputArray))
                    return inputArray;
                return inputArray.slice(pageNumber * pageSize, (pageNumber + 1)
                        * pageSize);
            };
        });
</code></pre>