Didn't have time to look through all that but I see you are not using 'ng-form'
From angular docs:
"Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined."
If you're not using ng-form your fighting an uphill battle for no reason.
Did you try my example ?
>I need to make parent form aware that something has changed in the child form. The main form has the following markup
>
>
><form name="form" novalidate role="form" data-sm:dirty-check data-server:error
> ng-show="$parent.showForm && !selections.justDeleted" class="ng-cloak">
>
>Note the smDirtyCheck directive which is the following:
>
>
> app.directive('smDirtyCheck', ['$modal', '$rootScope', '$location', '$state', 'resourceFactory',
> function ($modal, $rootScope, $location, $state, resourceFactory) {
> return {
> restrict: 'A',
> require: ['^form'],
> scope: {
> onOk: '&',
> onCancel: '&'
> },
> link: function (scope, element, attrs, controllers) {
>
> var form = controllers[0];
>
> window.onbeforeunload = function () {
> if ((form && form.$dirty) || (scope.$parent.form && scope.$parent.form.$dirty) || element.hasClass('ng-dirty')) {
> return resourceFactory.getResource('Messages', 'unsavedChanges');
> }
> };
>
> var stateChange = function (event, toState, toParams) {
>
> if ((form && !form.$dirty) || (scope.$parent.form && !scope.$parent.form.$dirty)) {
> onRouteChangeOff();
> return;
> }
>
> event.preventDefault();
>
> var modal = $modal.open({
> controller: function ($scope) {
> $scope.okClass = 'btn-primary',
> $scope.okLabel = resourceFactory.getResource('Labels', 'yes'),
> $scope.cancelLabel = resourceFactory.getResource('Labels', 'cancel'),
> $scope.title = resourceFactory.getResource('Labels', 'unsavedChanges'),
> $scope.message = resourceFactory.getResource('Messages', 'unsavedChanges');
> },
> templateUrl: '/app/templates/modal'
> });
>
> modal.result.then(function () {
> onRouteChangeOff();
>
> if (scope.onOk != null) {
> scope.onOk();
> }
> $state.go(toState, toParams);
> });
> };
>
> var onRouteChangeOff = $rootScope.$on('$stateChangeStart', stateChange);
> }
> };
> }]);>
>So, the idea of this directive is that if something has changed in the form and from the list we try to navigate to another row, we get a question about saving the changes first.
>
>This works just fine when the main form has "embedded" child forms like this:
>
>
> <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.editOperatorGeneralForm.$invalid]">@Labels.general</a></li>
> <li><a data-toggle="pill" href="#secRoles">@Labels.roleMembership</a></li>
> <li><a data-toggle="pill" href="#udf" ng-class="{true: 'invalid-tab', false: ''}[form.editOperatorUserFieldsForm.$invalid]">@Labels.userDefined</a></li>
> <li><a data-toggle="pill" href="#eMsg">@Labels.eMessages</a></li>
> <li><a data-toggle="pill" href="#notes">@Labels.notes</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("EditOperatorGeneral")
> </div>
> <div class="tab-pane" id="secRoles">
> @Html.Partial("EditOperatorSecurityRoles")
> </div>
> <div class="tab-pane" id="udf">
> @Html.Partial("EditOperatorUserFields")
> </div>
> <div class="tab-pane" id="eMsg">
> @Html.Partial("EditOperatorEMessages")
> </div>
> <div class="tab-pane" id="notes">
> @Html.Partial("EditOperatorNotes")
> </div>
> </div>
> </div>>
>However, it doesn't work when the forms are defined this way
>
>
><div class="col-lg-2 col-md-2 panel-container">
>
> <tabset vertical="true" type="pills">
> <tab ng-repeat="tab in tabsViews" select="selectView(tab.name, tab.index)"
> ng-show="tab.isVisible"
> class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}">
> <tab-heading>{{tab.title}}</tab-heading>
> </tab>
> </tabset>
>
> </div>>
>So, my problem is to let the main form know that something has changed in the child view defined the second way.
>
>Do you see a solution for this problem?
>
>
>
>
>>>>>Hi,
>>>>>
>>>>>More details about my original question
http://stackoverflow.com/questions/32016037/propagating-views-dirty-state-to-the-containing-form>>>>>
>>>>>I've created a new directive, but from that directive I don't know which event to hook to set parentForm dirty status when my form dirty status is changing.
>>>>>
>>>>>Thanks in advance.
>>>>
>>>>Can't you just add a scope.$watch on form.$dirty ?
>>>
>>>Can you please elaborate a bit? Where should I place the code? Most of my views are controlled by the same controller. Each view is its own form (chtml page).
>>
>>Haven't looked that closely at your code but I'd have thought anywhere where you have access to the parent form $setValidity().
>>But I don't really know why you need to do this - if you have nested ng-forms then invalid child forms should set validity on the parent form automatically.
>>Simple example:
<!DOCTYPE html>
>><html ng-app="nestedForms" xmlns="http://www.w3.org/1999/xhtml">
>><head>
>> <title>Nested Forms</title>
>> <script src="../../Scripts/angular.js"></script>
>> <script src="../../Scripts/angular-ui-router.js"></script>
>></head>
>><body>
>> <script type="text/javascript">
>> var app = angular.module('nestedForms', ['ui.router']);
>> app.config(function ($stateProvider, $urlRouterProvider) {
>> $stateProvider.state('child', {
>> template: '<ng-form name="childForm" ng-controller="childController"><input name="childInput" ng-model="childText" required /></ng-form>',
>> controller: childController
>> });
>> });
>> app.controller('mainController', mainController);
>> app.controller('childController', childController);
>> //Main Form Controller
>> function mainController($scope,$state) {
>> $scope.mainText = "Main Form Text";
>> $scope.loadView = function () {
>> $state.go('child');
>> };
>> }
>> //Child Form Controller
>> function childController($scope) {
>> $scope.childText = "Child Form Text";
>> }
>> </script>
>>
>> <ng-form name="mainForm" ng-controller="mainController">
>> <input name="mainInput" ng-model="mainText" required />
>> <input type="button" value="Load Child View" ng-click="loadView()"/>
>> <div>Main Form valid:{{mainForm.$valid}}</div>
>> <section ui-view></section>
>> </ng-form>
>></body>
>></html>
