HTML time input field minimum and maximum attributes not working for minutes
<p>So Im using angular to create a simple mobile app and within a section of html i have this:</p>

<pre><code>&lt;input id="timeSelected" type="time" min="{{minTimeToPresent}}" max="{{maxTimeToPresent}}" ng-model="date.time" class="time-input" ng-change="checkTheSelectedTime()"/&gt;
</code></pre>

<p>This is my really simple "time picker" and it works really nicely, I have dynamically given the element a min and max as you can see and the min and max works for the 'hours' portion of the time and even removes hours that lie outside of the range from the scroll wheel inside the app (when tested on a phone of course) but for some reason it does not do the same for the minutes.</p>

<p>Interestingly my ng-change function is not triggered if you select a time that is out of the range in regards to minutes, so if i have a max of <b>"20:30:00"</b> for example and pick the time <b>"20:31"</b> the ng-change is not triggered at all, but if i pick <b>"20:30"</b> it is triggered. </p>

<p>So it is acting as though it knows the min and max, but what I want in the first place is for the incorrect <b>MINUTES</b> to be removed from the selectable scroll wheel too, like the hours. </p>

<p>Please help, thanks!</p>

<p><b>Additional Details...</b></p>

<ul>
<li><p>The dynamically set times are in this format: e.g. "21:30:00"</p></li>
<li><p>I set the min and max values before the DOM has loaded so that I can be sure that the correct values are going to be used.</p></li>
</ul>