Hi everybody,

I have an Account form with the following markup:

<div class="col-lg-3 col-md-3 panel-container">
                            <ul class="nav nav-pills nav-stacked">
                                <li class="active">
                                                <a data-toggle="pill" href="#general" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountGeneral.$invalid]">@Labels.general</a>
                                            </li>
                                            <li>
                                                <a data-toggle="pill" href="#contact" ng-class="{true: 'invalid-tab', false: ''}[form.editContactForm.$invalid]">@Labels.contact</a>
                                </li>
                                <li ng-show="!isNew"><a data-toggle="pill" href="#invoices">@Labels.invoices</a></li>

                                <li ng-show="!isNew"><a data-toggle="pill" href="#invoicesToBePaid">    @Labels.payInvoices</a></li>

                                <li ng-show="!isNew"><a data-toggle="pill" href="#applyFees" ng-class="{true: 'invalid-tab', false: ''}[form.applyFees.$invalid]">    @Labels.applyFees</a></li>

                                <li><a data-toggle="pill" href="#userDefined" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountUserDefinedForm.$invalid]">@Labels.userDefined</a></li>
                                <li><a data-toggle="pill" href="#security" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountSecurityForm.$invalid]">@Labels.securityRestrictions</a></li>
                                <li><a data-toggle="pill" href="#web" ng-class="{true: 'invalid-tab', false: ''}[form.editAccountWebForm.$invalid]">@Labels.web</a></li>
                            </ul>
                        </div>

                        <div class="col-lg-9 col-md-9 panel-container">
                            <div class="tab-content">
                                <div class="tab-pane active" id="general">
                                    @Html.Partial("EditAccountGeneral")
                                </div>

                                <div class="tab-pane" id="contact">
                                    @Html.Partial("EditAccountContact")
                                </div>

                                <div class="tab-pane" id="invoices" ng-controller="invoicesCrudController">
                                    @Html.Partial("../Invoices/EditAccountInvoices")
                                </div>

                                <div class="tab-pane" id="invoicesToBePaid" ng-controller="invoicesToBePaidCrudController">
                                    @Html.Partial("../Invoices/PayInvoices")
                                </div>

                                <div class="tab-pane" id="applyFees" ng-controller="applyFeesController">
                                    @Html.Partial("../Invoices/ApplyFees")
                                </div>

                                <div class="tab-pane" id="userDefined">
                                    @Html.Partial("EditAccountUserDefined")
                                </div>
                                <div class="tab-pane" id="security">
                                    @Html.Partial("EditAccountSecurity")
                                </div>
                                <div class="tab-pane" id="web">
                                    @Html.Partial("EditAccountWeb")
                                </div>
                            </div>
                        </div>
                    </div>

As you can see, the first active tab is the General tab when this form is activated.

Now, from the Invoices tab I have a grid with invoices (the first column has a clickable link that opens Invoice Edit form).

It also has a New button that opens the same Invoice Edit form.

---------------------------------------------
On the Invoice Edit form we have Cancel button that is supposed to close the Invoice Edit form and bring us back. The interesting fact here is that if I click on the existing invoice and then on Cancel, it correctly returns me to the Invoices tab.

But if I do the same from the Cancel button from the new Invoice, I am going to the first tab. I would want to stay on the Invoices tab when I return.

Here is the code (as far as I can tell) for the Edit Invoice Cancel and then for the New Invoice Cancel (they are 2 separate controllers):

 $scope.cancel = function () {
                $scope.$emit('expandForm', 'true');
                $scope.form.$setPristine();
                $state.go('edit');
            };

and this is for the Cancel from the new invoice:

 $scope.cancel = function () {
             //   $scope.$emit('expandForm', 'true');
                $scope.form.$setPristine();
                //$state.go('edit', { "id": $scope.currentInvoice.accountNameHash });
                $state.go('edit', { "id": $scope.currentInvoice.accountNameHash }, { reload: true });
            };

I am wondering what can I do in order to make it return back correctly to the Invoices tab and not the General tab as it currently does. I do need to re-load the invoices after I added a new one.


By debugging I can see that the Init of the Accounts form is not fired when we return back from the Edit Invoice form (and the information in the Invoices grid is not updated, say, we changed the description, it remains the old one) while we do get Init of the Accounts form fired when we return from the New Invoice. As I said, two separate controllers (and 2 separate js files) are involved here.

Thanks in advance.