title: leading zeros missing within number input
body: <p>I need to have displayed, within the number input field, the leading zeros on integers between 00-09. I am using angularJS.</p>
  
  <p>View/template for the input field(sorry for the style within the html):</p>
  
  <pre><code>&lt;script type="text/ng-template" id="form_field_time"&gt;
    &lt;h3 style="color:coral ;"&gt;{{field.displayName}}&lt;/h3&gt;
    &lt;div ng-controller="timeAdjustCtrl"&gt;
        &lt;input style="float:left; width:auto; margin-right:5px;" type="number" min='0' max='23' placeholder="HH" ng-model="timeHH" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)"  /&gt;
        &lt;p style="float:left; line-height:50px;font-size:1em;"&gt;:&lt;/p&gt;
        &lt;input style="float:left;width:auto; margin-left:5px;" type="number" min='0' max='59' step="1" placeholder="MM" ng-model="timeMM" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" /&gt;
        &lt;p style="float:left; line-height:50px;font-size:1em;"&gt; {{field.theValues[0]}}&lt;/p&gt;
    &lt;br style="clear:both;" /&gt;
    &lt;/div&gt;  
  &lt;/script&gt;
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>  app.controller('timeAdjustCtrl', ['$scope', 
    function ($scope) {
  
      $scope.adjustTimeHhMm = function(hours, minutes, field) {
        console.log($scope.timeHH);
        var strHH = String(hours);
        var strMM = String(minutes);
  
        var path = "00";
        var newHH = path.substring(0, path.length - strHH.length) + strHH;
        var newMM = path.substring(0, path.length - strMM.length) + strMM;
        var newHhMm = String(newHH+':'+newMM);
        console.log(newHH + ':' + newMM);
        field.theValues[0] = newHhMm; 
        console.log($scope.timeHH);
      }
  
      $scope.initTimeValues = function(field){
        if (field.theValues[0] != 'undefined'){
          $scope.timeHH = parseInt(field.theValues[0].substring(0,2));
          $scope.timeMM = parseInt(field.theValues[0].substring(3,5));
        }
      }
    }
  ]);
  </code></pre>
  
  <p>This input field or set of two input fields set a time value(hours and minutes) which is stored as a single value(which remains in the desired format(HH:MM = ex=> 01:07)). The ng-model values($scope.timeHH &amp; $scope.timeMM) dont hold the leading zeros within the input field.</p>
  
  <p><img src="https://i.stack.imgur.com/lTFya.png" alt="enter image description here"></p>
  
  <p>I found an answer to this issue but I am not able to get it to work. This is the (<a href="https://stackoverflow.com/questions/27916185/angularjs-trims-leading-zeros-in-model-while-view-input-value-still-remains-unc">Answer</a>).</p>
  
  <p>Here is the ode for the directive. It is not triggering on blur nor giving errors. Can anyone see structure or syntax issues?</p>
  
  <p>View:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="form_field_time"&gt;
    &lt;h3 style="color:coral ;"&gt;{{field.displayName}}&lt;/h3&gt;
    &lt;div ng-controller="timeAdjustCtrl"&gt;
        &lt;input my-decimal style="float:left; width:auto; margin-right:5px;" type="number" min='0' max='23' placeholder="HH" ng-model="timeHH" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)"  /&gt;
        &lt;p style="float:left; line-height:50px;font-size:1em;"&gt;:&lt;/p&gt;
        &lt;input my-decimal style="float:left;width:auto; margin-left:5px;" type="number" min='0' max='59' step="1" placeholder="MM" ng-model="timeMM" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" /&gt;
        &lt;p style="float:left; line-height:50px;font-size:1em;"&gt; {{field.theValues[0]}}&lt;/p&gt;
    &lt;br style="clear:both;" /&gt;
    &lt;/div&gt;  
  &lt;/script&gt;
  </code></pre>
  
  <p>Directive(catches on blur event on the input field and avoids leading zero trim)(placed under my controller for the input fields(not inside)):</p>
  
  <pre><code> app.directive('myDecimals', function() {
  
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
  
          elm.blur(function() {
              var val = ctrl.$viewValue;
              ctrl.$setViewValue(val * 1);
              ctrl.$render();
          });
        }
      };
    });
  </code></pre>