title: Angular JS ng-click inside a modal window / Refresh angular scope in modal callback
body: <p>I'm loading a modal window into my html using <a href="http://dimsemenov.com/plugins/magnific-popup/" rel="nofollow">magnific popup</a>, which is essentially doing this:</p>
  
  <pre><code>&lt;html ng-app='basket'&gt;
      &lt;body ng-controller='BasketController as basket'&gt;
  
          &lt;a id='open' href='/product/1'&gt;Open modal&lt;/a&gt;
          &lt;a ng-click='addToCart(1)'&gt;Add to cart&lt;/a&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>... After Ajax load</p>
  
  <pre><code>&lt;html ng-app='basket'&gt;
      &lt;body ng-controller='BasketController as basket'&gt;
  
          &lt;div class='modal&gt;
              &lt;h1&gt;Product title&lt;/h1&gt;
              &lt;a ng-click='addToCart(1)'&gt;Add to cart&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;a id='open' href='/product/1'&gt;Open modal&lt;/a&gt;
          &lt;a ng-click='addToCart(1)'&gt;Add to cart&lt;/a&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the <code>ng-click</code> inside the modal doesn't fire. <strong>Is there a way I can refresh the scope with the modal content included?</strong></p>
  
  <p>To begin with, I thought I'd give it a go by adding an ng-click to the open modal button that can pass the scope to another function that opens the modal. I have a function that can console log the <code>$scope</code> after it has loaded, but I just need to refresh or something to make angular recognise the new html in the modal window.</p>