Angular 1.5

Directive playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.js"></script>
<body ng-app="myApp">
    <div ng-controller="myController as accvm">
        <form name="myForm" novalidate>

            <div class="item item-input">
                <input name="time" type="time" id="timeInput" max="19:30:00" ng-model="accvm.time" ng-change="accvm.timeChange()" required />
            </div>
			
        </form>
    </div>
</body>

CSS

label.item.has-error {
    border-left: 4px solid orange !important;
    border-right: 4px solid orange !important;
}

div.item.has-error {
    border-left: 4px solid orange !important;
    border-right: 4px solid orange !important;
}

.form-error {
    padding: 2px 0 2px 16px;
    color: orange;
}

JavaScript

angular
    .module('myApp', [])
    .controller('myController', function() {

        var vm = this;

        vm.timeChange = function() {
            console.log(' time change ');
        };

        setInitialTimes();

        function setInitialTimes() {
            vm.time = new Date(1970, 0, 1, 14, 57, 0);
            vm.time = new Date();
        }

    });