ng-hide and ng-show do not modify the DOM so much as change a class. This attribute directive removes the contained content if the expression evaluates to true.

alternative.md

This is an improved alternative to the occlude directive. Suppose we want the occlude to happen dynamically, when a model changed. The other version of the occlude directive defined here would just be invoked once, at the time the link function is called on an instantiated template. Ideally, model changes should drive such DOM manipulations through watchers.

So let's set up a boolean select box. First some model driving the options in the controller:

  $scope.cfg={};
  $scope.cfg.boolean_options = [ {label: 'True', value:true}, {label: 'False', value:false} ];

  $scope.cfg.include_exclude = true;

then some HTML and angular directives to render the select box

<label>Hide stuff? <select ng-model="cfg.include_exclude" ng-options="b.value as b.label for b in cfg.boolean_options"></select></label>

<div class="hidden" amc-occlude="cfg.include_exclude">stuff we should not see</div>

and finally the new directive:

  mymodule.directive('amcOcclude', function() {
    return {
      link: function( scope, element, attributes ) {
        var content = element.html();
        scope.$watch('cfg.include_exclude', function() {
          if (!scope.$eval(attributes.occlude)) {
            element.html(content).removeClass('hidden');
          } else {
            element.html('');
          }
        });
      },
      priority: 1003,
      restrict: 'A'
    };
  })

gistfile1.js

  mymodule.directive('amc-occlude', function() {
    return {
      link: function( scope, element, attributes ) {
        var content = element.html();
        if (!scope.$eval(attributes.occlude)) {
          element.html(content);
        } else {
          element.html('');
        }
      },
      priority: 1003,
      restrict: 'A'
    };
  })