Genuinely stop a element from binding – unbind an element – AngularJS

UPDATE

The way to do this is to create a new scope on the element with a directive like so.

yourModule.directive('unbindable', function(){
    return { scope: true };
});

And apply it to your element like so

<div unbindable id="yourId"></div>

Then to unbind this element from any updates you do this.

angular.element( document.getElementById('yourId') ).scope().$destroy();

Done, here’s a demo.

Demo: http://jsfiddle.net/KQD6H/

So this creates a new scope on the element and only works because all scopes inherit all data from their parent scopes. so the scope is basically the same as the parent scope, but allows you to destroy the scope without affecting the parent scope. Because this element was given it’s own scope, when you destroy it it doesn’t get the parent scope back like all of the other elements, if that makes sense 0.o

Everything below this line was my original answer,I’ll leave it here incase someone prefers this way

---

I have managed to achieve this genuinely with a unbindable directive.
When you have the unbinable directive set up on the element all that is required to unbind the element is this.

yourElement.attr('unbind', 'true'); // Ref 1
$scope.$broadcast('unbind'); // Ref 2

Here is the directive.

app.directive('unbindable', function(){
    return {
        scope: true, // This is what lets us do the magic.
        controller: function( $scope, $element){ 
            $scope.$on('unbind', function(){ // Ref 3
                if($element.attr('unbind') === 'true'){ // Ref 4
                    window.setTimeout(function(){ $scope.$destroy() }, 0);//Ref 5
                }
            });
        }
    }
});

and you set your element up like this.

<h1 unbindable></h1>

So whenever you add the unbind="true" attribute to the h1 and broadcast unbind the element will be unbind-ed

REF-1: Add the unbind true attribute to the element so that the directive knows what element you are unbinding.

REF-2: Broadcast the unbind event across the scopes so that the directive knows that you want to unbind a element – Make sure you add the attribute first. — Depending on your app layout, you might need to use $rootScope.$broadcast

REF-3: When the unbind event is broadcasted

REF-4: If the element associated with the directive has a true unbind attribute

REF-5: Then destroy the scope made by the directive. We have to use setTimeout because I think angular tries to do something after the $on event and we get a error, so using setTimeout will prevent that error. Although it fires instantly.

This works on multiple elements, here is a nice demo.

Demo: http://jsfiddle.net/wzAXu/2/