title: Input type="time" binding of value attribute doesn't update the UI with angular
body: <p>I have an <code>input</code> tag of <code>type="time"</code> as below</p>
  
  <pre><code>&lt;input type='time' id='from' ng-model='data.hall.occupancy.timeRange.from' datify value="{{data.hall.occupancy.timeRange.from | propertime}}"/&gt;
  </code></pre>
  
  <p>the filter and directive are as follows</p>
  
  <pre><code> app.directive('datify',function(){
  return {
      require:'ngModel',
      link:function(scope,element,attrs,modelCtrl){
          modelCtrl.$parsers.push(function(inputValue){
              var times = inputValue.split(":");
              var hours = times[0];
              var mins = times[1];
              var currentDate = new Date();
              var outputDate = new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),hours,mins);
              return outputDate.toString();
          });
      }
  };
  });
  
  app.filter('propertime',function(){
  return function(timeStamp){
      if(timeStamp){
          var dateObj = new Date(timeStamp.toString());
          var date = dateObj.getDate();
          var month = dateObj.getMonth()+1;
          var year = dateObj.getFullYear();
          var hours = (0+ dateObj.getHours().toString()).slice(-2);
          var minutes = (0+ dateObj.getMinutes().toString()).slice(-2);
          return hours+":"+minutes;//+" "+date+"/"+month+"/"+year;
      }
  }
  });
  </code></pre>
  
  <p>Link to my plnkr : <a href="http://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview" rel="nofollow">http://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview</a></p>
  
  <p>The <code>value</code> attribute of <code>input</code> tag is updated in DOM correctly, but doesn't affect the UI. However updating the time in the UI, updates the <code>value</code> attribute in the DOM. Can someone tell me what is happening here. </p>
  
  <p><strong>Note: I am using Chrome (Firefox shows input type="time" as a normal text input)</strong></p>