flex layout updated

Date validation and filtering

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ui-view="main"></div>

<script type="text/ng-template" id="state1.html">

    <div class="container-fluid">
        <div class="form-group">
                <label>Num Rows (max of 100)</label>
                <input ng-model="vm.numRows" ng-change="vm.numRowsChanged()" />
    </div>
        <div class="row">
            <button class="btn btn-default">Button1</button>
            <button class="btn btn-default">Button2</button>
            <button class="btn btn-default">Button3</button>
            <button class="btn...

CSS

html {
    height: 100%;
}
body.flex-layout {
    height: 100%;
    padding-bottom: 10px;
}
body.flex-layout .container, body.flex-layout .container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.body-content.flex-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
}
body.flex-layout div[ui-view="main"] {
    height: 100%;
    display: flex;
    flex-direction: column;
}
body.flex-layout div[ui-view] {
    height: 100%;
}
body.flex-layout div#tabs-views {
    display: flex;
    flex-direction: column;
}
body.flex-layout div.flex-scroll-content {
    overflow-y: auto;
    flex-shrink: 1;
}
body.flex-layout div.flex-scroll-content table {
    margin-bottom: 0px;
}
body.flex-layout div.flex-buttons {
    margin-top: 10px;
}
body.flex-layout footer {
    margin-top: -30px;
}
</style>
<!-- access to the HEAD element -->
<!--[if lt IE 10]>
<style type="text/css"> .flex-scroll-content {
    max-height: 82%;
}
</style>
<![endif]-->

JavaScript

(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 state1Ctrl = function ($filter) {
        var vm = this,
            createRows = function (numRows) {
                vm.tableRows.length = 0;
                for (var i = 0; i < numRows; i++) {
                    vm.tableRows.push({
                        col1: i,
                        col2: i,
                        col3: i,
                        col4: i,
                        col5: i,
                        col6: i
                    });
                };
            },
            numRowsChanged = function () {
                if (vm.numRows > 100) {
                    vm.numRows = 100;
                }
                createRows(vm.numRows);
            },
            init = function () {
                vm.numRows = 100;
                vm.tableRows = [];
                createRows(vm.numRows);
                vm.numRowsChanged = numRowsChanged;
            }
        init();
    };

    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:...