Time Format Filter

Shows using angular filter to format time in plain english.

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<!-- Ugly Hack to make AngularJS routing work inside of jsFiddle -->
<base href="/" />
<div class="container">
    <select class="country"
        ng-model = "country"
        ng-options = "country for country in countries"
        type = "text">
    <option value="">{{ "Select country" }}</option>
</select>

<select class="state"
        ng-model = "state"
        ng-disabled = "!states"
        ng-options = "state for state in states"
        type = "text"
        trigger = "country">
    <option value="">{{ "Select state" }}</option>
</select>
</div>

CSS

.time {
    font-weight:bold;
    font-size:2em;
}

JavaScript

(function () {
    angular.element(document).ready(function () {
        var module = angular.module('demo', ['ngRoute']);

        module.service('fakeService', function ($timeout) {

            var data = {
                'Uninted States': ['Texas', 'Tennessee'],
                    'India': ['Assam', 'Bihar']
            };

            var countries = _.keys(data);

            this.getCountries = function () {
                return $timeout(function () {
                    return countries.slice(0);
                }, 300);
            };

            this.getStates = function (country) {
                return $timeout(function () {
                    return data[country].slice(0);
                }, 300);
            };
        });

        module.directive('country', ['fakeService', function (fakeService) {
            return {
                restrict: "C",
                link: function (scope, element, attrs) {
                    fakeService.getCountries().then(function (data) {
                        scope.countries = data;
                    });
                }
            };
        }]);

        module.directive('state', ['fakeService', '$parse', function (fakeService, $parse) {
            return {
                restrict: "C",
                link: function (scope, element, attrs) {
                    scope.$watch(attrs.trigger, function (selectedType) {
                        var country = $parse(attrs.trigger)(scope);

                        if (angular.isDefined(country)) {


                            fakeService.getStates(country).then(function (data) {

                                scope.states = data;

                            });
                        }
                    });
                }
            };
        }]);

        angular.bootstrap(document, ['demo']);
    });


}());