pass information from outside into Modal in AngularJs

Question

it pretty confuse to me.

<div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto">
        <img height="220" ng-src="https://i.ytimg.com/vi/{{video}}/maxresdefault.jpg" ng-click='open()'/>
</div>

this is my html code, and I want it show a pop up when I click into the youtube thumbnail.

angular.module('7minWorkout')
.controller(
    'WorkoutVideosController', 
    ['$scope', '$modal', 
    function($scope, $modal) {
        $scope.open = function() {
            console.log('opening pop up');
            modalInstance = $modal.open({
                templateUrl: 'partials/video-panel.html',
                scope: $scope,

            })
        }
        $scope.close = function() {
            console.log('closing pop up');
            modalInstance.dismiss('cancel');         
        }
    }]
);

this is my javaScript file. I pass scope as $scope then I can read data from $scope outside and show the video but now I just want to show the video that in the thumbnail I clicked.

<div class="panel-body">   
        <div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto">    
            <iframe width="auto" height="500" ng-src="{{videoTransform(video)}}"  frameborder="0" allowfullscreen style="display: block; margin:auto;"></iframe>    
        </div>  
    </div> 

this is my pop up. I want 'video' variable in my pop up is the 'video' in the thumbnail that I clicked in. how to pass it into my pop up ?

Answer 1

Pass the selected video to the open function :

<div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto">
        <img height="220" ng-src="https://i.ytimg.com/vi/{{video}}/maxresdefault.jpg" ng-click='open(video)'/>
</div>

Then in your code pass the video to the modal via a controller, you have to create VideoModalCtrl :

$scope.open = function(video) {
    console.log('opening pop up');
    modalInstance = $modal.open({
        controller: 'VideoModalCtrl', 
        templateUrl: 'partials/video-panel.html',,
        resolve: {
          video: function () {
            return video;
          }
        }
    })
}

Get video in modal controller like this :

controller('VideoModalCtrl', function (video) {
 // Use video here
}