How to hide directive generated html after inserting it to body? Directive has "replace" set to trueThere is a directive:

.directive('location', function () {
        return {
            restrict : 'A',
            scope    : {},
            replace  : true,
            templateUrl: 'common/components/location/location.html',
            link     : function (scope, element, attr) {……}
        }
});

So it is used in another directive:

var scope     =  $rootScope.$new(true);                
var directive = $compile('<div location></div>')(scope);

$document.find('body').append(directive);

directive.hide(); - not working

How to hide directive generated html after inserting it to body? Directive has "replace" set to true