Pass data to angular ui modal (lightbox effect)

Question

Problem: I want to create a modal lightbox using the Angular UI Bootstrap modal Details: I have built a photo grid using ng-repeat. Each repeated photo opens the modal using the open() method. I'm struggling with how to pass the scope of the clicked item to the modal so I can grab the image url to display. I've implemented the scope parameter on the modal, which gives me access to the parent; however the parent is the parent scope of the clicked item and contains the whole array of all images in the grid. I need to figure out how to tell (programmatically) which index has been clicked, or send just the child scope to the modal. I'm a newbie... if I'm missing something or there's a better way to approach this, any help is welcome. My HTML: ```

``` Instance and controller: ``` app.controller('ModalDemoCtrl', func…

Accepted Answer

You could just do something like this.

HTML

```
<img src="{{photo.source}}" class="thumbnail img-responsive" ng-click="open(photo)">
```

Javascript

```
$scope.open = function (photo) {

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope,
    controller: ModalInstanceCtrl,
    resolve: {
      items: function () {
        return $scope.items;
      },

photo: function(){
          return photo;
      }
    }
});
```

Pass data to angular ui modal (lightbox effect)

Solution

Problem