components load before call angularjs - angularjs

Question

I am working on angular js components there are two components that will called when their respective button is clicked
Issue: when the page loads both components are initialized , but in real they should be initialized when I click on the respective component
example:
index.html
<div class='breadcrumbs'>
<div class='inner'>
<ul class='cf' style=" margin-top: 0px;">
<li ng-click="WizardsViewerCtrl.createFirst()">
</li>
<li ng-click="WizardsViewerCtrl.createSecond()">
<span>Arrange Questions</span> </a>
</li>
</ul>
</div>
</div>
<div ng-show="viewFirstRoute">
<first-component></first-component>
</div>
<div ng-show="viewSecondRoute">
<second-component></second-component>
</div>
index.js
$scope.viewFirstRoute=false;
$scope.viewSecondRoute=false;
function createFirst() {
$scope.viewFirstRoute=true;
$scope.viewSecondRoute=false;
}
function createSecond() {
$scope.viewFirstRoute=false;
$scope.viewSecondRoute=true;
}
problem is when this page index.html is loaded ,both components are initialized
first.component.js
angular
.module('AOTC')
.component('firstComponent', {
templateUrl: 'first.html',
controllerAs: 'firstCtrl',
controller:(function ($scope) {
console.log("first component loaded");//it prints while index.html is loaded even i didn't clicked on this component
})});
second.component.js
angular
.module('AOTC')
.component('secondComponent', {
templateUrl: 'second.html',
controllerAs: 'secondCtrl',
controller:(function ($scope) {
console.log("second component loaded");//it prints while index.html is loaded even i didn't clicked on second component
})});
summarizing: two components on same route must be initialized when I click on the respective component , but behavior noticed components are loaded as soon as route is loaded it doesn't care about the click, see comments in the JS file

Answer 1

Use ng-if instead of ng-show. it should fix the issue.
<div ng-if="viewFirstRoute">
<first-component></first-component>
</div>
<div ng-if="viewSecondRoute">
<second-component></second-component>
</div>
ng-show: it will add component to DOM but set its display property to none.
ng-if: Will add or remove component from DOM conditionally.