Just to compare HTML:

In the working form:

 <div class="form-group row col-lg-12">
            <div class="input-group">
                <input type="text" class="form-control" 
                ng-model="filterOptions.filterText"
                       data-no:dirty-check
                       placeholder="@Labels.search" />
                <span class="input-group-btn">
                    <button class="btn btn-default"
                            ng-click="search()">
                        @Labels.search
                    </button>
                </span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-11 col-lg-5 col-md-offset-1 col-lg-offset-1 col-sm-12 col-xs-12">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               ng-model="filterOptions.showFinalized"
                               data-no:dirty-check
                               ng-change="search()" />
                        @String.Format(Labels.showFinalizedX, Labels.invoices)
                    </label>
                </div>
            </div>
        </div>

changing text in the search input or changing value in the show Finalized check box doesn't make the form dirty.

In the non working form:

 <div id="SimpleSearch" class="row">
            <div class="col-lg-5 col-lg-offset-1">
                <input class="form-control" type="text" ng-model="searchTerm" 
                name="searchTerm" id="searchTerm"
                data-no:dirty-check
                       placeholder="@Labels.search" />
            </div>
        </div>

So, why the first form doesn't change the control's dirty state and the second does?


>>>It's a built-in angular function - just call it.....
>>
>>It's not working in this particular form :( E.g. I changed the directive to be now
>>

>>app.directive('noDirtyCheck', [function () {
>>        // Interacting with input elements having this directive won't cause the
>>        // form to be marked dirty.
>>        // http://stackoverflow.com/questions/17089090/prevent-input-from-setting-form-dirty-angularjs
>>        return {
>>            restrict: 'A',
>>           
>>            require: 'ngModel',
>>            link: function (scope, element, attrs, ctrl) {                           
>>
>>                element[0].focus(function () {
>>                    ctrl.$setPristine();
>>                });
>>
>>                //element[0].onblur(function () {
>>                //    ctrl.$setPristine();
>>                //});
>>            }
>>        };
>>    }]);

>>
>>and the control defined as
>>
>>

<input class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" type="text" ng-model="searchTerm" name="searchTerm" id="searchTerm" data-no:dirty-check="" placeholder="Search">

(this is what I see when I inspect the element).
>>
>>In the HTML it's defined as
>>
>>

>><div class="col-lg-5 col-lg-offset-1">
>>                <input class="form-control" type="text" ng-model="searchTerm" 
>>                name="searchTerm" id="searchTerm"
>>                data-no:dirty-check
>>                       placeholder="@Labels.search" />
>>            </div>

>>
>>The directive seems to work fine in another form and it's not working in this form. These things are driving me crazy :(
>
>Why did you change from onblur to focus ?