title: Why doesn't an HTML slider pick up ng-attr-max?
body: <p>Consider this simple example (available as a jsFiddle <a href="http://jsfiddle.net/dumbledad/7omvjxas/" rel="nofollow">here</a>):</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="MainCtrl as mainCtrl"&gt;
      &lt;form&gt;
          &lt;input 
              type="range" 
              ng-model="mainCtrl.range.value" 
              ng-attr-min="mainCtrl.range.min" 
              ng-attr-max="mainCtrl.range.max" /&gt;
      &lt;/form&gt;
      &lt;div&gt;{{mainCtrl.range.min}} -- {{mainCtrl.range.value}} -- {{mainCtrl.range.max}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>angular.module('AngularTestApp', [])
  .controller('MainCtrl', [function () {
      var self = this;
      self.range = {
          min: 0,
          max: 10,
          value: 3
      };
  }]);
  </code></pre>
  
  <p>Sliding the slider all the way to the right produces a value of 100, much more than the maximum of 10 that the slider should be set to. Why? How do I programmatically set the maximum value of an HTML slider through an AngularJS binding?</p>
  
  <p>(N.B. There is an open AngularJS bug <a href="https://github.com/angular/angular.js/issues/6726" rel="nofollow">ng-model does not set initial value and position of input[type=range] #6726</a> but that is about setting the initial value of the slider, which works fine in my code.)</p>