title: Cannot set ng-model value to null from directive
body: <p>In the example below I am trying to set controller value to null, when user closes popup window with error. But angularjs somehow takes old value, despite I am updating <code>$viewValue</code> and <code>$modelValue</code>. If you type in <code>input</code> any value, for example <code>1</code>, and press <kbd>Tab</kbd>, then after 1 second you will see <code>1.00</code>, however I am trying to set it to null (and view value should be empty string).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
  
    var module = angular.module('TestApp', []);
  
    module.directive('decimalTextbox', ['$timeout', function ($timeout) {
      return {
        restrict: 'A',
        replace: false,
        require: '?ngModel',
        scope: {
          onValidate: '='
        },
        link: function (scope, element, attrs, ctrl) {
        
          ctrl.$formatters.unshift(function (value) {
            return value != null ? parseFloat(value).toFixed(2) : '';
          });
          
          ctrl.$parsers.unshift(function (value) {
            return value == '' ? null : parseFloat(value);
          });
          
          $(element).on('blur', function () {
            $timeout(function () {
              var result = { isValid: true, value: ctrl.$modelValue };
              scope.onValidate(result);
              if (!result.isValid) {
                // show popup with close button here
                // to simplify example I use setTimeout
                setTimeout(function () {
                  $(element).val('');
                  ctrl.$viewValue = '';
                  ctrl.$modelValue = null;
                  scope.$apply();
                  console.log(ctrl.$modelValue);
                }, 1000);
              }
            });
          });
        }
      };
    }]);
    
    module.controller('TestController', ['$scope', function (scope) {
      
      scope.someValue = 3;
      
      scope.validate = function (result) {
        result.isValid = false;
      };
      
    }]);
  
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="TestApp" ng-controller="TestController"&gt;
    &lt;input
      type="text"
      ng-model="someValue"
      decimal-textbox=""
      on-validate="validate"&gt;
    &lt;h3&gt;{{ someValue }}&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>