AngularJS | How to render a HTML element(directive) only when condition is met?

I am working on a AngularJS(1.4) project where I want to load a directive on a particular conditions.

This directives when loaded calls few APIs and display some HTML elements.

I want to call those API only if those conditions are met.

In case when conditions are not met I tried following:

1. using ng-if, it's not displaying the directive but it's calling the APIs.
2. using ng-show, it's not displaying the directive but it's calling the APIs.

I got to know that ng-if first adds the directive and then removes it if conditions are not met. Here on loading of directive, APIs are being called.

Is there any way or approach to resolve this problem ?