Edit in JSFiddle

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.controllers', []);
    angular.module('myApp.directives', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var dateBefore = function () {
        var directive = {
            require: 'ngModel',
            link: function (scope, el, attrs, ctrl) {
                var isInclusive = attrs.dateOrEquals ? scope.$eval(attrs.dateOrEquals) : false,
                    validate = function (val1, val2) {
                        if (val1 === undefined || val2 === undefined) return;
                        var isArray = val2 instanceof Array;
                        var isValid = true;
                        var date1 = new Date(val1);
                        if (isArray && val2.length > 0) {
                            for (var i = 0; i < val2.length; i++) {
                                if (val2[i] !== undefined) {
                                    var date2 = new Date(val2[i]);
                                    isValid = isValid && (isInclusive ? date1 <= date2 : date1 < date2);
                                }
                                if (!isValid)
                                    break;
                            }
                        }
                        else {
                            if (val2 !== undefined) {
                                var date2 = new Date(val2);
                                isValid = isInclusive ? date1 <= date2 : date1 < date2;
                            }
                        }
                        ctrl.$setValidity('dateBefore', isValid);
                    };
                // Watch the value to compare - trigger validate()
                scope.$watch(attrs.dateBefore, function () {
                    validate(ctrl.$viewValue, scope.$eval(attrs.dateBefore));
                });

                ctrl.$parsers.unshift(function (value) {
                    validate(value, scope.$eval(attrs.dateBefore));
                    return value;
                })
            }
        }
        return directive
    };

    var dateAfter = function () {
        var directive = {
            require: 'ngModel',
            link: function (scope, el, attrs, ctrl) {
                var isInclusive = attrs.dateOrEquals ? scope.$eval(attrs.dateOrEquals) : false,
                    validate = function (val1, val2) {
                        if (val1 === undefined || val2 === undefined) return;
                        var isArray = val2 instanceof Array;
                        var isValid = true;
                        var date1 = new Date(val1);
                        if (isArray && val2.length > 0) {
                            for (var i = 0; i < val2.length; i++) {
                                if (val2[i] !== undefined) {
                                    var date2 = new Date(val2[i]);
                                    isValid = isValid && (isInclusive ? date1 >= date2 : date1 > date2);
                                }
                                if (!isValid)
                                    break;
                            }
                        }
                        else {
                            if (val2 !== undefined) {
                                var date2 = new Date(val2);
                                isValid = isInclusive ? date1 >= date2 : date1 > date2;
                            }
                        }
                        ctrl.$setValidity('dateAfter', isValid);
                    };
                // Watch the value to compare - trigger validate()
                scope.$watch(attrs.dateAfter, function () {
                    validate(ctrl.$viewValue, scope.$eval(attrs.dateAfter));
                });

                ctrl.$parsers.unshift(function (value) {
                    validate(value, scope.$eval(attrs.dateAfter));
                    return value;
                })
            }
        }
        return directive
    };

    angular.module('myApp.directives')
        .directive('dateBefore', dateBefore);
    angular.module('myApp.directives')
        .directive('dateAfter', dateAfter);

    var state1Ctrl = function ($filter) {
        var vm = this;
        vm.minDate = new Date();
        vm.maxDate = new Date();
        vm.minDate = vm.minDate.setDate(vm.minDate.getDate() - 30);
        vm.maxDate = vm.maxDate.setDate(vm.maxDate.getDate() + 30);
        vm.dateFormat = 'MM/dd/yyyy';
        vm.dateOptions = {
            'year-format': "'yyyy'",
            'starting-day': 1
        };

        vm.disabled = function (date, mode) {
            return (mode === 'day' && false); // (date.getDay() === 0 || date.getDay() === 6));
        };

        vm.dateChanged = function () {
            vm.filteredDate1 = { date: vm.date1, filtered: $filter('date')(vm.date1, "MM/dd/yyyy") };
            vm.filteredDate2 = { date: vm.date2, filtered: $filter('date')(vm.date2, "shortDate") };
            vm.filteredDate3 = { date: vm.date3, filtered: $filter('date')(vm.date3, "MM/dd/yyyy") };
            vm.filteredDate4 = { date: vm.date4, filtered: $filter('date')(vm.date4, "shortDate") };
            vm.filteredDate5 = { date: vm.date5, filtered: $filter('date')(vm.date5, "shortDate") };
            vm.filteredDate6 = { date: vm.date6, filtered: $filter('date')(vm.date6, "shortDate") };
            vm.filteredDate7 = { date: vm.date7, filtered: $filter('date')(vm.date7, "shortDate") };
            vm.filteredDate8 = { date: vm.date8, filtered: $filter('date')(vm.date8, "shortDate") };
        };
    };

    state1Ctrl.$inject = ['$filter'];
    angular.module('myApp.controllers')
        .controller('state1Ctrl', state1Ctrl);

    myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider',

    function ($locationProvider, $stateProvider, $urlRouterProvider) {

        $locationProvider.html5Mode(false);

        $urlRouterProvider.when('/', '/state1')
            .otherwise("/state1");

        $stateProvider.state('app', {
            abstract: true,
            url: '/',
            views: {
                'main': {
                    template: '<div ui-view>/div>'
                }
            }
        })
        .state('app.state1', {
            url: 'state1',
            templateUrl: 'state1.html',
            controller: 'state1Ctrl',
            controllerAs: 'vm',
            reloadOnSearch: false
        })
    }]);

    myApp.run(['$log', function ($log) {
        $log.log("Start.");
    }]);
})()
<div ng-include="'menu.html'"></div>
<div ui-view="main" class="container"></div>

<script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">Our Menu</span>
            </div>
        </div>
    </nav>
</script>

<script type="text/ng-template" id="state1.html">
    <form class="form-inline" name="vm.form" role="form" novalidate>
        <div class="form-group">
            <div class="form-group" ng-class="{ 'has-error': vm.form.date1.$error.dateBefore }">
                <label>Date1</label>
                <input name="date1" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" ng-model="vm.date1"
                       is-open="vm.date1open" min-date="vm.minDate" max-date="vm.maxDate" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)"
                       ng-click="vm.date1open = !vm.date1open" ng-change="vm.dateChanged()" date-before="vm.date2" date-or-equals="true" placeholder="LT or EQ Date2" />
                <small id="date1DateBefore" class="error" ng-show="vm.form.date1.$error.dateBefore" ng-bind="'Date1 must be lt or eq to ' + (vm.date2 | date:'shortDate')" />
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.form.date2.$error.dateAfter }">
                <label>Date2</label>
                <input name="date2" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" min-date="vm.minDate" max-date="vm.maxDate"
                       datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" is-open="vm.date2open"
                       ng-model="vm.date2" ng-click="vm.date2open = !vm.date2open"
                       ng-change="vm.dateChanged()" date-after="vm.date1" date-or-equals="false" placeholder="GT and NE Date1" />
                <small id="date2DateAfter" class="error" ng-show="vm.form.date2.$error.dateAfter" ng-bind="'Date2 must be gt and not eq to ' + (vm.date1 | date:'shortDate')" />
            </div>
        </div>

        <br />
        <div>
            Cascading..
        </div>

        <div class="form-group form-inline" role="form">
            <div class="form-group" ng-class="{ 'has-error': vm.form.date3.$error.dateBefore || vm.form.date3.$error.dateAfter }">
                <label>Date3</label>
                <input name="date3" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" ng-model="vm.date3"
                       is-open="vm.date3open" min-date="vm.minDate" max-date="vm.maxDate" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)"
                       ng-click="vm.date3open = !vm.date3open" ng-change="vm.dateChanged()" date-before="vm.date4" date-or-equals="false" date-after="[vm.date1,vm.date2]"
                       placeholder="GTNEQ Date1&2 LTNEQ Date4" />
                <small id="date3DateBefore" class="error" ng-show="vm.form.date3.$error.dateBefore" ng-bind="'Date3 must be lt and not eq to ' + (vm.date4 | date:'shortDate')" />
                <small id="date3DateAfter" class="error" ng-show="!vm.form.date3.$error.dateBefore && vm.form.date3.$error.dateAfter" ng-bind="'Date3 must be gt and not eq Date1 and Date2'" />
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.form.date4.$error.dateAfter }">
                <label>Date4</label>
                <input name="date4" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" min-date="vm.minDate" max-date="vm.maxDate"
                       datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" is-open="vm.date4open"
                       ng-model="vm.date4" ng-click="vm.date4open = !vm.date4open"
                       ng-change="vm.dateChanged()" date-after="vm.date3" date-or-equals="true" placeholder="GT or EQ Date3" />
                <small id="date4DateAfter" class="error" ng-show="vm.form.date4.$error.dateAfter" ng-bind="'Date4 must be gt or eq to ' + (vm.date3 | date:'shortDate')" />
            </div>
        </div>

        <br />
        <div>
            Cascading..
        </div>

        <div class="form-group form-inline" role="form">
            <div class="form-group" ng-class="{ 'has-error': vm.form.date5.$error.dateBefore || vm.form.date5.$error.dateAfter }">
                <label>Date5</label>
                <input name="date5" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" ng-model="vm.date5"
                       is-open="vm.date5open" min-date="vm.minDate" max-date="vm.maxDate" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)"
                       ng-click="vm.date5open = !vm.date5open" ng-change="vm.dateChanged()" date-before="vm.date6" date-or-equals="true" date-after="[vm.date1,vm.date2,vm.date3,vm.date4]"
                       placeholder="GTEQ Date1234 LTEQ Date6" />
                <small id="date5DateBefore" class="error" ng-show="vm.form.date5.$error.dateBefore" ng-bind="'Date5 must be lt or eq to ' + (vm.date6 | date:'shortDate')" />
                <small id="date5DateAfter" class="error" ng-show="!vm.form.date5.$error.dateBefore && vm.form.date5.$error.dateAfter" ng-bind="'Date5 must be gt or eq Date1,2,3,4'" />
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.form.date6.$error.dateAfter }">
                <label>Date6</label>
                <input name="date6" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" min-date="vm.minDate" max-date="vm.maxDate"
                       datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" is-open="vm.date6open"
                       ng-model="vm.date6" ng-click="vm.date6open = !vm.date6open"
                       ng-change="vm.dateChanged()" date-after="vm.date5" date-or-equals="false" placeholder="GT and not EQ Date5" />
                <small id="date6DateAfter" class="error" ng-show="vm.form.date6.$error.dateAfter" ng-bind="'Date6 must be gt and not eq to ' + (vm.date5 | date:'shortDate')" />
            </div>
        </div>

        <br />
        <div>
            Cascading..
        </div>

        <div class="form-group form-inline" role="form">
            <div class="form-group" ng-class="{ 'has-error': vm.form.date3.$error.dateBefore || vm.form.date3.$error.dateAfter }">
                <label>Date7</label>
                <input name="date7" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" ng-model="vm.date7"
                       is-open="vm.date7open" min-date="vm.minDate" max-date="vm.maxDate" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)"
                       ng-click="vm.date7open = !vm.date7open" ng-change="vm.dateChanged()" date-before="vm.date8" date-or-equals="true" date-after="[vm.date1,vm.date2,vm.date3,vm.date4,vm.date5,vm.date6]"
                       placeholder="GTEQ Date123456 LTEQ Date8" />
                <small id="date7DateBefore" class="error" ng-show="vm.form.date7.$error.dateBefore" ng-bind="'date7 must be lt or eq to ' + (vm.date8 | date:'shortDate')" />
                <small id="date7DateAfter" class="error" ng-show="!vm.form.date7.$error.dateBefore && vm.form.date7.$error.dateAfter" ng-bind="'Date7 must be gt or eq Date1,2,3,4,5,6'" />
            </div>
            <div class="form-group" ng-class="{ 'has-error': vm.form.date4.$error.dateAfter }">
                <label>Date8</label>
                <input name="date8" type="text" class="form-control date-field" datepicker-popup="{{vm.dateFormat}}" min-date="vm.minDate" max-date="vm.maxDate"
                       datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" is-open="vm.date8open"
                       ng-model="vm.date8" ng-click="vm.date8open = !vm.date8open"
                       ng-change="vm.dateChanged()" date-after="vm.date7" date-or-equals="true" placeholder="GT or EQ Date7" />
                <small id="date8DateAfter" class="error" ng-show="vm.form.date8.$error.dateAfter" ng-bind="'date8 must be gt or eq to ' + (vm.date7 | date:'shortDate')" />
            </div>
        </div>
    </form>
    <br />
    <br />
    <pre ng-bind="vm.filteredDate1 | json" />
    <pre ng-bind="vm.filteredDate2 | json" />
    <pre ng-bind="vm.filteredDate3 | json" />
    <pre ng-bind="vm.filteredDate4 | json" />
    <pre ng-bind="vm.filteredDate5 | json" />
    <pre ng-bind="vm.filteredDate6 | json" />
    <pre ng-bind="vm.filteredDate7 | json" />
    <pre ng-bind="vm.filteredDate8 | json" />
</script>