title: Genuinely stop a element from binding - unbind an element - AngularJS
body: <p>I'm trying to find out how I can stop a <strong>DOM</strong> element from binding data from the scope in angular. </p>
  
  <p>I know that you could do this with if statements and all, but is there a genuine &amp; permanent way to stop binding a element in angular but keep the content that was added?</p>
  
  <p>So say i have this </p>
  
  <pre><code>&lt;div ng-bind=​"content" class=​"ng-binding"&gt;​Welcome​&lt;/div&gt;​
  </code></pre>
  
  <p>And i change the model so that the div changes to this.</p>
  
  <pre><code>&lt;div ng-bind=​"content" class=​"ng-binding"&gt;​Welcome​ World&lt;/div&gt;​
  </code></pre>
  
  <p>Then I click the button that will unbind it, so if I change the model to <code>'Welcome Universe'</code>, I wan't the <code>&lt;div&gt;</code> to be the same as before. This</p>
  
  <pre><code>&lt;div ng-bind=​"content" class=​"ng-binding"&gt;​Welcome​ World&lt;/div&gt;​
  </code></pre>
  
  <p>I know there are many other ways to do this, but i don't know any way to genuinely unbind the element, without cloning it and replacing the old one looping through the attributes and text..ect</p>
  
  <p><strong>Demo thing: <a href="http://jsfiddle.net/a9tZY/">http://jsfiddle.net/a9tZY/</a></strong></p>
  
  <p>So, by doing this, it shouldn't affect the model or other elements that are binding to that model.</p>
  
  <p>Long story short, Tell Angular to leave the element alone forever.</p>