AngularJS ng-model changes with ng-pattern

AngularJS won't trigger a change on an `ng-model` if the input does not match the `ng-pattern`.

HTML

<div ng-app>
    <div ng-controller="PatternTestCtrl">
        <form name="ngform">
            <label for="phone">Change the text to match the placeholder:</label><br/>
            <input type="text" name="phone" ng-model="phone" maxlength="10" placeholder="9999XXXXXX"/>
        </form>
        <ul>
            <li ng-repeat="change in changes">{{ change.body }}</li>
        </ul>
    </div>
</div>

CSS

input.ng-dirty.ng-invalid { color: red }

JavaScript

function PatternTestCtrl($scope) {
    $scope.changes = [];

    $scope.$watch('phone', function (newValue, oldValue) {
        
        // Changes aren't run while you are inputting invalid text
        // Once the input is valid, a change is triggered
        // Once you change from valid input, a change is triggered
        
        $scope.changes.unshift({
            body: 'Change: ' + newValue
        });
    });
}