<div class="col-sm-2 panel-container"> <ul class="nav nav-pills nav-stacked"> <li data-ui-sref-active="active" class="active"> <a data-toggle="pill" href="" data-ui-sref=".general ">@Labels.general</a> </li> <li data-ui-sref-active="active" class="active"> <a data-toggle="pill" href="" data-ui-sref=".contact">@Labels.contact</a> </li> <li data-ui-sref-active="active" class="active" data-ng-show="!isNew"> <a data-toggle="pill" href="" data-ui-sref=".invoices">@Labels.invoices</a> </li> <li data-ui-sref-active="active" class="active" data-ng-show="!isNew"> <a data-toggle="pill" href="" data-ui-sref=".invoicesToBePaid"> @Labels.payInvoices</a> </li> <li data-ui-sref-active="active" class="active" data-ng-show="!isNew"> <a data-toggle="pill" href="" data-ui-sref=".applyFees" ng-class="{true: 'invalid-tab', false: ''}[form.applyFees.$invalid]"> @Labels.applyFees</a> </li> <li data-ui-sref-active="active" class="active"> <a data-toggle="pill" href="" data-ui-sref=".userdefined">@Labels.userDefined</a> </li> <li data-ui-sref-active="active" class="active"> <a data-toggle="pill" href="" data-ui-sref=".security">@Labels.securityRestrictions</a> </li> <li data-ui-sref-active="active" class="active"> <a data-toggle="pill" href="" data-ui-sref=".web">@Labels.web</a> </li> </ul> </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"> <div ng-show="!isNew"> <button class="btn btn-primary" ng-click="save(currentAccount)" ng-disabled="form.$invalid || disableAction"> @Labels.save </button> <data-delete:button title="{{ '@Labels.delete: ' + currentAccount.acctName }}" message="@String.Format(Messages.confirmDelete, Labels.account)" disable-action="disableAction" delete="delete()"> </data-delete:button> <data-cancel:button title="@Labels.unsavedChanges" message="@Messages.unsavedChanges" cancel="cancel()" disable-action="disableAction" dirty="form.$dirty"> </data-cancel:button> </div> <div ng-show="isNew"> <button id="btnAdd" class="btn btn-primary" ng-click="new(currentAccount)" ng-disabled="form.$invalid || disableAction"> @Labels.add </button> <data-cancel:button title="@Labels.unsavedChanges" message="@Messages.unsavedChanges" cancel="cancel()" disable-action="disableAction" dirty="form.$dirty"> </data-cancel:button> </div> </div>The currentAccount is a property defined on the scope. Each of the tab view content is a separate html file using ng-model='currentAccount.someProperty'.
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $stateProvider.state('home', { url: '/', controller: 'accountsController', template: '' }).state('edit', { url: '/edit/:id', controller: 'accountsCrudController', templateUrl: '/CustomerAccounts/Accounts/editForm', onEnter: function () { window.console && console.log('Entering Edit state;'); } }).state('new', { url: '/new', controller: 'accountsCrudController', templateUrl: '/CustomerAccounts/Accounts/editForm', onEnter: function () { window.console && console.log('Entering New state;'); } }) .state('edit.general', { //url: '/general', templateUrl: '/CustomerAccounts/accounts/editAccountGeneral', controller: 'accountsCrudController', onEnter: function () { window.console && console.log('Entering edit.general state;'); } }) .state('edit.contact', { //url: '/contact', templateUrl: '/CustomerAccounts/accounts/editAccountContact', controller: 'accountsCrudController' }) .state('edit.invoicesToBePaid', { //url: '/invoices/payInvoices', templateUrl: '/CustomerAccounts/invoices/PayInvoices', controller: 'invoicesToBePaidCrudController' }) .state('edit.applyFees', { //url: '/invoices/applyFees', templateUrl: '/CustomerAccounts/Invoices/ApplyFees', controller: 'applyFeesController', onEnter: function () { window.console && console.log('Entering edit.applyFees state;'); } }) .state('edit.userdefined', { //url: '/userdefined', templateUrl: '/CustomerAccounts/Accounts/EditAccountUserDefined', controller: 'accountsCrudController' }) .state('edit.security', { //url: '/security', templateUrl: '/CustomerAccounts/Accounts/EditAccountSecurity', controller: 'accountsCrudController' }) .state('edit.web', { //url: '/web', templateUrl: '/CustomerAccounts/Accounts/EditAccountWeb', controller: 'accountsCrudController' }) .state('new.general', { //url: '/general', templateUrl: '/CustomerAccounts/Accounts/editAccountGeneral', controller: 'accountsCrudController' }) .state('new.contact', { //url: '/contact', templateUrl: '/CustomerAccounts/Accounts/editAccountContact', controller: 'accountsCrudController' }) .state('new.invoicesToBePaid', { //url: '/invoices/payInvoices', templateUrl: '/CustomerAccounts/Invoices/PayInvoices', controller: 'invoicesToBePaidCrudController', onEnter: function () { window.console && console.log('Entering new.invoicesToBePaid state;'); } }) .state('new.applyFees', { //url: '/invoices/applyFees', templateUrl: '/CustomerAccounts/Invoices/ApplyFees', controller: 'applyFeesController', onEnter: function () { window.console && console.log('Entering new.applyFees state;'); } }) .state('new.userdefined', { //url: '/userdefined', templateUrl: '/CustomerAccounts/Accounts/EditAccountUserDefined', controller: 'accountsCrudController' }) .state('new.security', { //url: '/security', templateUrl: '/CustomerAccounts/Accounts/EditAccountSecurity', controller: 'accountsCrudController' }) .state('new.web', { //url: '/web', templateUrl: '/CustomerAccounts/Accounts/EditAccountWeb', controller: 'accountsCrudController' }); }]);So, everything seems to be displayed correctly, so one way binding is working OK. But saving is not working and my guess it's because editForm has one scope and editAccountGeneral, for example, has a different scope.