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/>
            <div>
                <input type="checkbox" ng-model="checkValue" />
            </div>
             used ng-pattern <input type="text" name="phone" ng-model="phone" ng-pattern="/^\d*$/" ng-disabled="!checkValue" maxlength="12" placeholder="555-555-5555"/>
            <div>Pattern validity : {{ngform.phone.$valid}}</div>
            <br>
            <div>
                used ng-if : <input type="text" name="dummyNum" ng-pattern="/^\d*$/" ng-model="dummyNum" ng-if="checkValue" />
            </div>    
        <div> ng-if input box validity : {{ngform.dummyNum.$valid}}</div>
        </form>
    </div>
</div>

CSS

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

JavaScript

function PatternTestCtrl($scope) {
    /*$scope.changes = [];
    $scope.checkValue=true;
    $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
        });
    });*/
}