Q:

Custom directive hidden but code still runs

I have a custom directive which is sometimes hidden using ng-hide:
<my-custom-directive ng-show="vm.showBox"
    value="vm.objects"
></my-custom-directive>         

A snippet from my custom directive code:
function myCustomDirective() {
    var directive = {
        controller: controller,
        controllerAs: 'vm',
        ///...
        scope: {
            value: '='
        }
    };
    return directive;

    function controller($scope) {
        var vm = this;
        ///...
        $scope.value.dates = $scope.value.dates || [];      
    }
}

The problem: even when the directive isn't supposed to be loaded/displayed (because vm.showBox is false), the custom directive's controller code runs and in such case it fails because $scope.value isn't passed (it's undefined there).
Why does the directive's controller code runs anyway, if the directive is hidden? I want to assume that if the directive is used, it's given valid parameters without having to check whether $scope.value is defined.

A:

ng-show controls visibility of element (change of css property display) but element still exists in DOM. to remove/create element you can use ng-if instead of ng-show

