Angular $modal scope - Passing an object to $modal

I am attempting to pass angular's bootstrap modal the url of the image that was clicked in a angular masonry gallery. What I have is very close to the demo in the documentation with only a few changes. I know this is completely an issue with my own understanding of scope.

My modal HTML:

    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>

And in my Controller:

angular.module('testApp').controller('GalleryCtrl', function ($scope, $modal, $log) {
  $scope.animationsEnabled = true;
  $scope.items = ['item1', 'item2', 'item3'];
  // Temporary Generation of images to replace with about us images
  function genBrick() {
      var height = ~~(Math.random() * 500) + 100;
      var id = ~~(Math.random() * 10000);
      return {
        src: 'http://placehold.it/' + width + 'x' + height + '?' + id
      };
  };
  this.bricks = [
    genBrick(),
    genBrick(),
    genBrick(),
    genBrick(),
    genBrick(),
    genBrick()
  ];
  this.showImage = function(item){
    alert(item.src); // gives me exactly what im trying to pass to the modal
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'views/modal.html',
      scope: $scope,
      controller: 'GalleryCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

  }
});

Lastly for clarity, this is my masonry code

<div masonry>
    <div class="masonry-brick" ng-repeat="brick in gallery.bricks">
        <img ng-src="{{ brick.src }}" alt="A masonry brick" ng-click="gallery.showImage(brick)">
    </div>
</div>

Right now this works fine to return the items objects 3 values in li tags to the modal just like in the original example. What id really like to pass into the model is the (item.src) but no matter what i change it never seems to get passed in so that i can display it.

via Chebli Mohamed