title: ng-pattern regex Error: [$parse:lexerr] Lexer Error
body: <p>I have this as my regex pattern</p>
  
  <pre><code>(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})
  </code></pre>
  
  <p>i get console errors below, but it works!:</p>
  
  <pre><code>libraries-c8d65edf41.js:22505 Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 1-1 [^] in expression [(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})].
  </code></pre>
  
  <p><a href="http://errors.angularjs.org/1.5.2/" rel="nofollow">http://errors.angularjs.org/1.5.2/</a>$parse/lexerr?p0=Unexpected%20nextharacter%20&amp;p1=s%201-1%20%5B%5E%5D&amp;p2=(%5E(%5BAa%5D%5BSs%5D)%5B0-9%5D%7B8%7D)%7C(%5E6%5B0-9%5D%7B7%7D)</p>
  
  <p>Any ideas on how to get rid of the console errors?
  Thanks.</p>
  
  <p>Here is the directive html</p>
  
  <pre><code>&lt;div class="input"&gt;
  &lt;div data-ng-class="{'input-group': label}"&gt;
      &lt;div class="input-group-addon"
          data-ng-if="label"&gt;
          {{label}}
          &lt;span class="required"
              data-ng-if="required &amp;&amp; isEditable"&gt;
              *
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="input-group-addon required"
          data-ng-if="!label &amp;&amp; required &amp;&amp; isEditable"&gt;
          *
      &lt;/div&gt;
      &lt;div class="form-control"
          title="{{object[key] || 'N/A'}}"
          data-ng-if="!isEditable"&gt;
          &lt;span&gt;{{object[key] || 'N/A'}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="form-control editable"
          title="{{object[key] || 'N/A'}}"
          data-ng-if="isEditable &amp;&amp; !isEditing"
          data-ng-click="edit()"&gt;
          &lt;span&gt;
              &lt;a href=""&gt;{{object[key] || 'N/A'}}&lt;/a&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;input class="form-control"
          data-ng-if="isEditable &amp;&amp; isEditing"
          data-ng-model="model.value"
          data-ng-keydown="onKeypress($event)"
          data-ng-blur="save()"
          data-ng-pattern="regexPattern"
          name="{{inputName}}"
          data-csdp-autofocus /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and here is the js for the directive</p>
  
  <pre><code>(function (angular) {
  'use strict';
  
  angular.module('commons.directives.forms')
      .directive('exInput', InputDirective);
  
  InputDirective.$inject = ['$q', 'commons.constants.KeyCodeConstant'];
  
  function InputDirective ($q, KeyCodeConstant) {
      return {
          restrict: 'A',
          replace: true,
          templateUrl: 'commons/directives/forms/input.directive.html',
          link: link,
          scope: {
              input: '@exInput',
              isEditable: '=?',
              object: '=ngModelObject',
              key: '@ngModelKey',
              autofocus: '=?',
              required: '@ngRequired',
              inputName: '@inputName',
              regexPattern: '@ngPattern',
              preEditing: '&amp;',
              onEditing: '&amp;',
              onSave: '&amp;',
              onCancel: '&amp;',
              onFinally: '&amp;',
              onInit: '&amp;'
          }
      };
  
      function link (scope) {
          scope.edit = edit;
          scope.save = save;
          scope.cancel = cancel;
          scope.onKeypress = onKeypress;
          scope.label = scope.input;
          scope.model = { value: '' };
          scope.isEditing = scope.autofocus ? scope.autofocus : false;
  
          var oldValue;
  
          function edit () {
              $q.when(scope.preEditing()).then(function() {
                  oldValue = scope.object[scope.key];
                  scope.model.value = oldValue;
                  scope.label = '&gt; ' + scope.input;
                  scope.onEditing();
                  scope.isEditing = true;
              });
          }
  
          function save () {
              scope.object[scope.key] = scope.model.value;
              scope.onSave();
              onFinally();
          }
  
          function cancel () {
              scope.object[scope.key] = oldValue;
              scope.onCancel();
              onFinally();
          }
  
          function onKeypress (event) {
              if (event.keyCode === KeyCodeConstant.ENTER) {
                  save();
              } else if (event.keyCode === KeyCodeConstant.ESC) {
                  cancel();
              }
          }
  
          function onFinally () {
              scope.label = scope.input;
              scope.isEditing = false;
              scope.onFinally();
          }
  
          scope.onInit({ $scope: scope });
      }
  }
  </code></pre>
  
  <p>})(angular);</p>
  
  <p>Here is how i use it;</p>
  
  <pre><code>&lt;input class="form-margin"
                          data-ex-input="Assignment ID"
                          data-is-editable="true"
                          data-ng-model-object="vm.contract"
                          data-ng-pattern="{{vm.AssignmentIdRegex}}"
                          data-input-name="assignmentId"
                          data-ng-model-key="assignmentId" /&gt;
                      &lt;div class="alert alert-info"
                      data-ng-show="contractForm.assignmentId.$error.pattern &amp;&amp; contractForm.assignmentId.$dirty"&gt;
                          &lt;strong&gt;Assignment ID: &lt;/strong&gt;ie. AS12345678 or 61234567
                      &lt;/div&gt;
  </code></pre>