How to load controller as per specific condition using Angular.js

Question

I am facing some issue. I have some nested controller within one parent controller and I need it to execute as per some condition using Angular.js. I am explaining my code below.

NABH.html:

<div ng-controller=NABHParentController>
    <div ng-show="showNabh">
       <div ng-include="'nabh1.html'"></div>
    </div>
    <div ng-show="showNabh1">
       <div ng-include="'nabh2.html'"></div>
    </div>
</div>

nabh1.html:

<div class="right_panel" style="display:block;" id="auditnabh" ng-controller="NABHController">
 <td class="sticky-cell" ng-click="initiateNABH(nabh.NABHAuditID)">

</td>
</div>

nabh2.html:

<div class="right_panel" ng-controller="NABH2Controller">
   <h2 class="page-title">NABH (INT012017001)</h2>
<div>

NABHParentController.js:

var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
   $scope.showNabh=true;
   $scope.showNabh1=false;
})

NABHController.js:

var app=angular.module('demo');
app.controller('NABHController',function($scope,$http,$state,$window,$location,$filter,getBothIdToAuditDetailPage)
{
    $scope.initiateNABH = function(aid) {
        $scope.$parent.$parent.showNabh=false;
        $scope.$parent.$parent.showNabh1=true;
    }
})

Here Initially all controller are loading and nabh1.html is displaying first. When user will click on that td click event the second part html is showing. Here I need when user will click on that ng-click="initiateNABH(nabh.NABHAuditID)" the second view will open and the resepective controller will start execute. Initially only displaying view related controller will execute. Please help.

Answer 1

It sounds like using ng-if instead of ng-show will solve your problem:

<div ng-if="showNabh">
   <div ng-include="'nabh1.html'"></div>
</div>
<div ng-if="showNabh1">
   <div ng-include="'nabh2.html'"></div>
</div>

The difference is that while ng-show will "only" hide the element using css when the expression is falsy, ng-if will not create the element if it's falsy and as a result will not initiate the controller until ng-if is truthy.

Also, I would probably move the initiateNABH function to the parent controller - it will still be available in the child controller but makes the code less likely to break since you don't have to use $parent:

var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
   $scope.showNabh=true;
   $scope.showNabh1=false;

   $scope.initiateNABH = function(aid) {
       $scope.showNabh=false;
       $scope.showNabh1=true;
   }
})