Custom directive hidden but code still runs - angularjs

Question

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.

Answer 1

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

Answer 2

ng-show only controls display property of element. It does not prevent element to render in DOM. To prevent it you can use ng-if.
But the problem with ng-if is that according to condition every it destroy scope and creates new one.
To prevent this problem you should use ng-show.
In your case you can use watch expressin in your directive.
<my-custom-directive ng-show="vm.showBox"
value="vm.objects"
></my-custom-directive>
function myCustomDirective() {
var directive = {
controller: controller,
controllerAs: 'vm',
///...
scope: {
value: '='
}
};
return directive;
function controller($scope) {
var vm = this;
///...
var watchExpression = $scope.$watch('value', function(newValue, oldValue){
if(newValue)
{
$scope.value.dates = $scope.value.dates || [];
watchExpression(); //de-register watch expression
}
});
}
}