title: Angular bind directive scope dynamically
body: <p>How can i bind new scope to the directive?</p>
  
  <p>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</p>
  
  <p>All i want to do is to bind some model to the popup on click on the product thumb.</p>
  
  <pre><code>&lt;li ng-repeat="product in products"&gt;
     &lt;button ng-click="openPopup(product)"&gt;&lt;/button&gt;
  &lt;/li&gt;
  
  
  // Some controller
  ... 
  $scope.openPopup = function(product) {
      var popup = angular.element('&lt;popup product="product"&gt;&lt;/popup&gt;');
  
      // Of course is not working because i want to bind this `product` argument
      $compile(popup)($scope);
  }
  </code></pre>
  
  <p>Could someone tell me how to deal with it?
  Thanks</p>