AngularJS - exclude field from form validation / dirty

Question

I have a checkbox inside ng-form rapped by HTML5 form that I want to exclude so it won't change my form $state($pristine or $dirty).

I have tried using ignoreDirty directive - Angular 1.2: Is it possible to exclude an input on form dirty checking?

and some other solutions and none work for ng-form inside HTML5 form, some example code:

<form name="mainForm" class="col-xs-10 form-validation" novalidate>
  <ng-form name="innerForm">
    <div>
      <span>check my
        <span ng-if="vm.utils.mode!=='readonly'">
          <input type="checkbox" 
                 ng-model="vm.utils.amalotSecond" 
                 class="secondYearCheckBox">
        </span>
      </span>
    </div>
  </ng-form>
<form>

Answer 1

The ignoreDirty directive you provided works fine like in this demo fiddle. The following code example was taken from angular-1-2-is-it-possible-to-exclude-an-input-on-form-dirty-checking. Also try to avoid using nested forms which are not HTML conform. An form element can't have an element form. It will cause problems and errors e.g. the one you are currently facing.

View

<div ng-controller="MyCtrl">
  <form name="test">
    Watching dirty: <input ng-model="name"  /><br />
    Ignoring dirty: <select ng-model="gender" ignore-dirty>
      <option>male</option>
      <option>female</option>
    </select><br />
    dirty: {{test.$dirty}}
  </form>
</div>

AngularJS application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';
});

myApp.directive('ignoreDirty', [function() {
    return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$setPristine = function() {};
      ctrl.$pristine = false;
    }
  }
}]);