JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="test" ng-app="app">
    <input type="text" ng-model="content">
    <h1 ng-bind="content"></h1>
    <h1 id="element0" unbindable="true" unbind="false" ng-bind="content"></h1>
        <h1 id="element1" unbindable="true" unbind="false" ng-bind="content"></h1>
    <button ng-click="unbind('0')">unBind the second heading</button>
        <button ng-click="unbind('1')">unBind the third heading</button>
</div>

JavaScript

app = angular.module('app', []);
app.controller('test', function( $scope ) {
    $scope.content = 'Type in the input';
    $scope.unbind = function(id) {
        var el = angular.element( document.getElementById('element' + id) );  
        el.attr('unbind', 'true');
        $scope.$broadcast('unbind');
    };
});



app.directive('unbindable', function(){
    return {
        scope: true,
        controller: function( $scope, $element){ 
            $scope.$on('unbind', function(){
                if($element.attr('unbind') === 'true'){
                    window.setTimeout(function(){$scope.$destroy()},0) 
                }
            });
        }
    }
});