<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://unpkg.com/angular@1.5.8/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.controller.js"></script>
    <script src="app/datetime.component.js"></script>
    
    <style>
      [type=date].ng-invalid-max {
        color: red;
      }
    </style>
</head>

<body ng-controller="AppController as app">
    <h1>{{ (app.dateTime | date:'yyyy-MM-dd hh:mm:ss a') || 'INVALID DATE' }}</h1>
    <datetime value="app.dateTime" max="2016-10-28"></datetime>
</body>

</html>
namespace myApp {
  angular.module('app', []);
}
namespace myApp {
  class AppController {
    constructor() {
      this.dateTime = new Date();
      this.dateTime.setSeconds(0, 0);
    }
  }
  
  angular.module('app').controller('AppController', AppController);
}
namespace myApp {
  const dateTimeComponent = {
    templateUrl: 'app/datetime.component.html',
    bindings: {
      displayValue: '=value',
      max: '@'
    }
  };
  
  angular.module('app').component('datetime', dateTimeComponent);
}
<form action="">
    <p>
      <label>Date:</label><br>
      <input type="date" ng-model="$ctrl.displayValue" max="{{$ctrl.max}}">
    </p>
    <p>
      <label>Time:</label><br>
      <input type="time" ng-model="$ctrl.displayValue" max="{{ctrl.dateTime}}">
    </p>
    <input type="submit">
</form>