how to bind scope/model with angular ui $modal.popup()

Question

I have a ng-repeat list view with each item has edit button. I want to open a modal popup and populate values associated with that list item into the popup fields.

I am loading the popup the usual way with $scope.modalInstance = $modal.open({...});

What I am struggling with is, how do I bind the scope of the popup! I know scope can be passed as a parameter while initializing it. But I want the popup to directly bind the fields with that specific list item.

I tried passing the list item like

var item = $scope.list[index];

$scope.modalInstance = $modal.open({
    ...,
    scope: item
});

But it gives error as TypeError: $rootScope.$new is not a function . May be this isn't the correct way I should bind the list item. Please guide in right direction.

Adding the full method which triggers editing of the list item

$scope.editItem = function (index) {
    $scope.item = $scope.api.select[index];

    $scope.modalInstance = $modal.open({
        templateUrl: 'templates/pupup-edit-item.html',
        scope: $scope,
    });

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

And the template,

<div class="modal-header">
        <h3 class="modal-title">Edit Item</h3>
</div>
<div class="modal-body">
    <input ng-model="item.name" />
</div>
<div class="modal-footer">
        <button class="btn btn-primary" ng-click="popup_Ok()">OK</button>
        <button class="btn btn-default" ng-click="popup_Cancel()">Cancel</button>
</div>

Answer 1

I suppose you have a separate template with the modal window. Inside that template you define a local scope which is going to get populate by filtering the list of values from the controller.

So the modal content should look like this:

<div modal="isProductShowing" close="hideFullProduct()" options="productModalOptions">    
    <section class="container modal-body product-modal">    
        <button class="modal-body__close" ng-click="hideFullProduct()">Close</button>    

        <div class="product-modal__content">                
            <h1 class="product-modal__name">{{ currentFullProduct.name }}</h1>                            
        </div>                        
    </section>    
</div>

Then inside the controller you search for the product which is defined in the main template where you populate the list and associate the object to the scope of the modal window. So you need to filter the product which has the id defined as parameter in the listing template.

$scope.isProductShowing = false;

$scope.currentFullProduct = null;

$scope.productModalOptions = {
    backdropFade: true,
    dialogFade:true
};

$scope.showFullProduct = function (productId) {
    $scope.isProductShowing = true;
    $scope.currentFullProduct = _.findWhere($scope.products, { id: productId});
}

Only one thing remained: to trigger the modal window on click. This needs to be done on the main listing template:

<li ng-click="showFullProduct(product.productId)">

Hope it's clear, otherwise i can assist.

Answer 2

yes you can bind like this, using resolve

    var modalInstance = $modal.open({

       ......
       .... 
        resolve: {
            item: function() {
                return $scope.item;
            }
        }
    });