Hi everybody,

We have an Account Search form that lists accounts. When we select an individual account, an Account Edit form is opened. This form has the following markup (part of it):

<div class="fourpanel">
        <div data-sm:collapse="$parent.showForm" id="hideFrm" class="pull-left col-sm-3 sm-search-list">
            <form name="form" id="editForm" novalidate role="form" data-sm:dirty-check data-server:error 
            ng-show="$parent.showForm"
                  class="ng-cloak">
                <div id="accountForm" class="widget" data-resize:container>
                    <div class="widget-head">
                              Head content here not important
                    </div>
                    <div class="widget-content">
                        <div class="scrollable widget-resize">
                            <div class="padd">
                                @Html.Partial("_EditFormAlerts")
                            </div>
                            <div class="col-sm-2 panel-container">
                                <tabset vertical="true" type="pills">
                                    <tab heading="@Labels.general" select="selectView('general')">

                                    </tab>

                                    <tab heading="@Labels.contact" select="selectView('contact')">

                                    </tab>

                                    <tab heading="@Labels.invoices" ng-show="!isNew" select="selectView('invoices')">

                                    </tab>
                                    <tab heading="{{'    ' + '@Labels.payInvoices'}}"
                                         ng-show="!isNew" select="selectView('invoicesToBePaid')">
                                    </tab>
                                    <tab heading="{{'    '+ '@Labels.applyFees'}}"
                                         ng-show="!isNew" select="selectView('applyFees')">
                                    </tab>
                                    <tab heading="@Labels.userDefined"
                                         ng-show="!isNew" select="selectView('userDefined')">
                                    </tab>
                                    <tab heading="@Labels.securityRestrictions"
                                         ng-show="!isNew" select="selectView('security')">
                                    </tab>
                                    <tab heading="@Labels.web"
                                         ng-show="!isNew" select="selectView('web')">
                                    </tab>

                                </tabset>
                            </div>

                            <div class="col-sm-10 panel-container">
                                <div data-ui-view data-autoscroll="false"></div>
                                <div data-ui-view="invoices" data-autoscroll="false"></div>
                            </div>
                        </div>
                        <div class="widget-foot">
                                     Buttons here - not important
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div id="showFrm" class="sm-form-expand-button text-center col-sm-1"
             ng-show="!$parent.showForm"
             ng-click="test()">
            <i class="fa fa-angle-double-right"></i>
            <div class="panel2Label">@Labels.account : {{ currentAccount.fullName }} {{ !isNew ? '(' + currentAccount.acctName + ')' : '' }} {{ currentAccount.isSystemAccount? '(System Account)' :''}}</div>
        </div>

        <div class="col-sm-9 panel-container">
            <div data-ui-view="detail" data-autoscroll="false"></div>
        </div>

So, as you see we have an Edit form with several tabs and also at the bottom we have detail view defined which is supposed to be activated when we would try to click on the individual invoice (after first opening an invoices view).

The invoices view (state) is defined this way:

 .state('edit.invoices', {
                url: '/invoices:invoiceId?accountNameHash?isNew',
                views: {
                    'invoices': {
                        templateUrl: '/CustomerAccounts/accounts/EditAccountInvoices',
                        controller: 'invoicesSearchController'
                    },
                    'detail': {
                        templateUrl: '/CustomerAccounts/invoices/editForm',
                        controller: 'invoicesCrudController'
                    }
                }
            })

And the SelectView method is the following:

$scope.selectView = function (viewName) {
              if (viewName === 'invoices') {
                  $scope.invoicesViewActivated = true;                  
              }
              else
                  $scope.invoicesViewActivated = false;
              
              window.console && console.log('SelectView called with the ' + viewName + ' view...');

              if ($scope.isNew) {
                  $state.go('new.' + viewName);                  
              }
              else {
                 $state.go('edit.' + viewName);                
              }
          };

So, this is what is happening when I click on the Invoices tab: the invoices view is activated, but also the details view is activated and the general page of the edit invoices view. This is not what I want to be happening as I haven't clicked on the individual invoice in the grid yet. Also, the two other tabs (Apply Fees and Pay Invoices) share the same functionality and suppose to also be able to call the invoice edit form when clicking on the invoice.

So, I am a bit confused as what should I do to avoid calling unnecessary code when not needed. I don't want to activate details view and related views till I actually click on the invoice.

Please see attached and note the console messages as what is happening here.

Thanks a lot in advance.