title: ngMessages displaying dynamic error for input number as per max or min attributes
body: <p>I have been trying for a while to find out information on how to use angular validation to display messages but with the specific min or max attribute.</p>
  
  <p>If I have an <code>input[type="number"]</code> field with attributes like <code>min=1</code> or <code>max=10</code> and the user enters <code>11</code> I want a validation message that says: <code>"The number should be less than 10"</code>. But the number <code>10</code> should be taken from the <code>max</code> attribute dynamically.</p>
  
  <p>I'd like to have the messages in a separate template. 
  I have the following:</p>
  
  <pre><code>&lt;!-- default ng-messages --&gt;
  &lt;script type="text/ng-template" id="common-messages"&gt;
      &lt;span ng-message="required" class="help-block"&gt;This field is required&lt;/span&gt;
      &lt;span ng-message="maxlength" class="help-block"&gt;Must be no longer than {{maxlength}} characters&lt;/span&gt;
      &lt;span ng-message="min" class="help-block"&gt;This number must be greater than {{min}}.&lt;/span&gt;
      &lt;span ng-message="max" class="help-block"&gt;This number must be less than {{max}}.&lt;/span&gt;
      &lt;span ng-message="number" class="help-block"&gt;A number is required&lt;/span&gt;
      &lt;span ng-message="date" class="help-block"&gt;A date is required&lt;/span&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and then in a form</p>
  
  <pre><code>&lt;div class="container" ng-controller="app.packaging.PackagingAddController as package"&gt;
      &lt;form name="packageForm" ng-submit="package.save()" role="form" novalidate class="form-horizontal"&gt;
          &lt;input type="text" name="packageCount" ng-model="package.model.packageCount" class="form-control" max="10 " /&gt;
          &lt;div ng-messages="packageForm.packageCount.$error" role="alert" ng-show="packageForm.$submitted || packageForm.packageCount.$touched" ng-messages-multiple&gt;
                &lt;div ng-messages-include="common-messages"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the error shown is <code>This number must be less than .</code> so the {{max}} is not being injected. Is there any way to achieve this so that I can reuse the common-messages template?</p>
  
  <p>PS: This thread <a href="https://stackoverflow.com/questions/27114170/how-to-get-min-and-max-values-of-input-angularjs">How to get min and max values of input angularjs</a> is not useful for my question since it does not reuse a template nor it reads from the html input max attribute.</p>