JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="test">
    <input type="text" ng-model="message"> <br><br>
    <h1 id="yourId" unbindable>{{ message }}</h1> <- this one is unbindable <br><br>
    <h1 unbindable> {{ message }}</h1> <- this one is unbindable but is not unbinded by the button <br><br>
    <h1>{{message}}</h1> <- this one is not unbindable <br><br>
    <button ng-click="unbind()">Unbind the selected element</button>
</div>

CSS

h1{
    display: inline;
}

JavaScript

var app = angular.module('app', []);

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

app.controller('test', function( $scope ) {
    $scope.message = 'Random Message';
    $scope.unbind = function() {
        var element = document.getElementById('yourId');
        angular.element( element ).scope().$destroy();
        alert('Element is no longer binding to any data');
    };
});