title: Angular.js - ngModel value is undefined when ng-pattern is set in directive
body: <p>something similar may have been answered (ng-pattern + ng-change) but all responses were unable to fix this issue.</p>
  
  <p>I have two imbricated directives for creating a form input, a parent directive to control name, label, validator etc. and a child directive to set pattern and input type specific stuff.</p>
  
  <p>However, when setting a pattern, the value on my model is set to undefined when ng-pattern return false.</p>
  
  <p>Directives:</p>
  
  <pre><code>&lt;input-wrapper ng-model="vm.customer.phone" name="phone" label="Phone number"&gt;
      &lt;input-text type="tel"&gt;&lt;/input-text&gt;
  &lt;/input-wrapper&gt;
  </code></pre>
  
  <p>Generated HTML:</p>
  
  <pre><code>&lt;label for="phone"&gt;Phone number:&lt;/label&gt;
  &lt;input type="text" name="phone" 
    ng-model="value"
    ng-model-options="{ updateOn: \'blur\' }"
    ng-change="onChange()"
    ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/"&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module('components', [])
      .directive('inputWrapper', function() {
      return {
          restrict: 'E',
          require: 'ngModel',
          scope: true,
          link: function (scope, element, attrs, ngModel) {
            scope.name = attrs.name;
            scope.label = attrs.label;
  
            scope.onChange = function () {
              ngModel.$setViewValue(scope.value);
            };
  
            ngModel.$render = function () {
              scope.value = ngModel.$modelValue;
            };
          }
      }
      })
    .directive('inputText', function() {
      return {
          restrict: 'E',
          template: '&lt;label for="{{name}}"&gt;{{label}}:&lt;/label&gt;&lt;input type="text" name="{{name}}" ng-model="value" ng-model-options="{ updateOn: \'blur\' }" ng-change="onChange()" ng-pattern="pattern"&gt;',
          link: function (scope, element, attrs) {
  
            if (attrs.type === 'tel') {
              scope.pattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
            }
          }
      }
      });
  
  angular.module('app',['components'])
          .controller('ctrl',function($scope){
            var vm = this;
  
            vm.customer = {
              phone: '010203040506'
            };
          });
  </code></pre>
  
  <p>What am I doing wrong ?</p>
  
  <p>Codepen for use case: <a href="https://codepen.io/Yosky/pen/yVrmvw" rel="nofollow noreferrer">https://codepen.io/Yosky/pen/yVrmvw</a></p>