title: Dynamic form ng-pattern based off sibling <select> option in Angular.js
body: <p>I have a form with 2 elements, a dropdown and a text box.
  I want to match the text box with $pattern but be able to choose my $pattern depending on the selection made in the first form control.</p>
  
  <p>A simple abstracted example of what I'm aiming at:</p>
  
  <pre><code>&lt;form&gt;
      &lt;select&gt;
          &lt;option&gt;A-Z&lt;/option&gt;
          &lt;option&gt;0-9&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="text" pattern="{{[A-Z]}}"/&gt;
      &lt;input type="text" pattern="{{[0-9]}}"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I don't mind having both inputs and using ng-show but would rather have one and swap the pattern. How would you really achieve this effect in Angular?</p>
  
  <hr>
  
  <p>Thank you for your reply, it got me a lot closer, but I am slightly more complicated in that I really need a 3-way data binding (i think?)</p>
  
  <p>I have a model for the select element:</p>
  
  <pre><code>$scope.myModel = [
   {id: 'abc', value: 'foo'},
   {id: 'def', value: 'bar'}
  ]
  </code></pre>
  
  <p>and an object with corresponding keys:</p>
  
  <pre><code>var myObj = {
      abc: /^\d{3}$/,
      def: /^\d{4}$/
  };
  
  $scope.validationPattern = myObj[$scope.myModel.id];
  </code></pre>
  
  <p>I build my select element from the model:
      </p>
  
  <p>and an input:</p>
  
  <pre><code>&lt;input name="myfield" id="myfield"
        ng-model="myModel"
        ng-pattern="validationPattern"
        required 
  /&gt;
  </code></pre>
  
  <p>validation pattern gets set initially but changing the option in the select doesn't cause it to update.</p>
  
  <p>Ultimately if a user selects foo in the dropdown the input should only accept 3 digits.</p>