AngularJS selectively showing dynamic directives - angularjs

Question

I created a few directives. When the page load all directives is loaded. All directives appear. I want to show directives when the function is called. For example when $scope.getConsultant is called the consultant directive must be appear. Other directives should not appear. I have too many html template but I didn't write here. How can I control? What is the best way?
Directives
<div class='container'>
<div consultant></div>
<div investment></div>
<div portfolio></div>
</div>
window.ngApp.directive('investment', function () {
return {
templateUrl: 'lib/view/investment.html'
};
});
window.ngApp.directive('consultant', function () {
return {
templateUrl: 'lib/view/consultant.html'
};
});
window.ngApp.directive('portfolio', function () {
return {
templateUrl: 'lib/view/portfolio.html'
};
});
AngularJS
var ngApp = angular.module('tapusor', []);
window.ngApp.controller('controllerHome', ['$scope', '$controller',
function ($scope, $controller) {
$scope.lat =25.33544;
$scope.lng =13.21687;
$scope.getConsultant = function () {
$.ajax({
type: 'post',
url: "/",
dataType: 'json',
data: {
lat: $scope.lat,
lng: $scope.lng
},
async: true,
cache: false,
success: function (data) {
$scope.resConsultant = data;
}
});
}
$scope.searchInvestment = function () {
$.ajax({
type: 'post',
url: "/",
dataType: 'json',
async: false,
cache: false,
data: {
lat:$scope.lat,
lng:$scope.lng
},
success: function (data) {
$scope.resInvestment = data;
}
})
}
$scope.portfolio = function () {
$.ajax({
type: 'post',
url: "/",
dataType: 'json',
async: false,
cache: false,
data: {
lat:$scope.lat,
lng:$scope.lng
},
success: function (data) {
$scope.resPortfolio = data;
}
})
}
}
]);

Answer 1

First, Satpal is right, use Angular builtins wherever possible.
You need some variable that you can key off of to determine which directive is currently being 'shown'. Then, on each one, you can use that with ng-if.
<div class='container'>
<div consultant ng-if="$shown == 'consultant'"></div>
<div investment ng-if="$shown == 'investment'"></div>
<div portfolio ng-if="$shown == 'portfolio'"></div>
</div>
This is just a rough example, but hopefully you get the idea.

Answer 2

I'd recommending restructuring this code to take advantage of an ngSwitch.
https://docs.angularjs.org/api/ng/directive/ngSwitch
If the goal is to have other directives not appear, then loading the data, and then using an ngSwitch will do just that.