Angular bind directive scope dynamically

Question

How can i bind new scope to the directive?

For exmaple we have product catalog and if you click the product - popup will be shown. The main part is that i don't want to create 100 popups that will be hidden, and open the, by something like model.id

All i want to do is to bind some model to the popup on click on the product thumb.

<li ng-repeat="product in products">
   <button ng-click="openPopup(product)"></button>
</li>


// Some controller
... 
$scope.openPopup = function(product) {
    var popup = angular.element('<popup product="product"></popup>');

    // Of course is not working because i want to bind this `product` argument
    $compile(popup)($scope);
}

Could someone tell me how to deal with it? Thanks

Answer 1

I suppose in the sample that we only display one popup at a time and that the popup is modal

Template:

<li ng-repeat="product in products">
   <button ng-click="openPopup(product)"></button>
</li>

<popup ng-show="showPopup" product="selected_product"></popup>

Controller:

$scope.openPopup = function(product) {
   $scope.selected_product = product;
   $scope.showPopup = true;
}