Angular validation tooltip and val summary

by manoj

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-animate.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<section ng-app="app">
    <article ng-controller="Ctrl" class="alert-success well">
        <form name="form" novalidate>
            <div ng-class="{'form-group': true, 'has-error':form.number.$invalid}">
                <div class="row">
                    <div class="col-md-4">
                        <label for="name">Number (min - 5; max - 20;)</label>
                        <validation-tooltip target="number">
                            <ul class="list-unstyled">
                                <li validation-message ng-if="$field.$error.required">this field is required</li>
                                <li validation-message ng-if="$field.$error.number">should be number</li>
                                <li validation-message ng-if="$field.$error.min">minimum - 5</li>
                                <li validation-message ng-if="$field.$error.max">miximum - 20</li>
                            </ul>
                        </validation-tooltip>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required />
                    </div>
                </div>
            </div>
            <div class="alert alert-danger" ng-show="form.number.$invalid && form.number.$dirty">
                <ul>
                    <li...

CSS

validation-tooltip ul, ol {
                margin: 0;
            }
            .validationMessageTemplate {
                display: none;
            }
            /*
            .tooltip.right .tooltip-arrow {
                top: 50%;
                left: 0;
                margin-top: -5px;
                border-right-color: #f2dede;
                border-width: 5px 5px 5px 0;
            }
            .tooltip-inner {
                color: #a94442;
                background-color: #f2dede;
                border-color: #ebccd1;
                background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
                background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
                background-repeat: repeat-x;
                border-color: #dca7a7;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
            }
*/

JavaScript

var app = angular.module("app", []);
    app.controller('Ctrl', function ($scope) {});
    app.directive('validationMessage', function () {
        return {
            restrict: 'A',
            priority: 1000,
            require: '^validationTooltip',
            link: function (scope, element, attr, ctrl) {
                ctrl.$addExpression(attr.ngIf || true);
            }
        }
    });
    app.directive('validationTooltip', function ($timeout) {
        return {
            restrict: 'E',
            transclude: true,
            require: '^form',
            scope: {},
            template: '<span class="label label-danger span1" ng-show="errorCount > 0">hover to show err</span>',
            controller: function ($scope) {
                var expressions = [];
                $scope.errorCount = 0;
                
                this.$addExpression = function (expr) {
                    expressions.push(expr);
                }
                $scope.$watch(function () {
                    var count = 0;
                    angular.forEach(expressions, function (expr) {
                        if ($scope.$eval(expr)) {
                            ++count;
                        }
                    });
                    return count;

                }, function (newVal) {
                    $scope.errorCount = newVal;
                });

            },
            link: function (scope, element, attr, formController, transcludeFn) {
                scope.$form = formController;

                transcludeFn(scope, function (clone) {
                    var badge = element.find('.label');
                    var tooltip = angular.element('<div class="validationMessageTemplate tooltip-danger" />');
                    tooltip.append(clone);
                    element.append(tooltip);
                    $timeout(function () {
                        scope.$field = formController[attr.target];
                        badge.tooltip({
       ...