title: How to proper cleanup child scopes of an Angular directive
body: <p>Background: I am creating a directive based bgDropdown of angularstrap. My goal is to create a similar widget HTML select element, but with custom templates for each element.</p>
  
  <p>The widget works fine. but using Batarang discovered that whenever the user displays the dropdown child scopes are created and are never destroyed. Thus, each time the dropdown is displayed more and more child scopes are created. </p>
  
  <p>I need to understand how to do a proper cleaning of the children scopes.  </p>
  
  <p>Sample plunk: <a href="http://plnkr.co/edit/xP6HS9?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/xP6HS9?p=preview</a></p>
  
  <pre><code>Step 1: Before first click.
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/l8Z1F.png" alt="Step 1: Pristine"></p>
  
  <pre><code>Step 2: After first click and after to closed.
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/JhTk9.png" alt="After first click"></p>
  
  <pre><code>Step 3: After various opens and closes.
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kOutg.png" alt="enter image description here"></p>