<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://rawgit.com/Lemoncode/lc-validation-summary/master/build/lcvalidationsummary.js"></script>
    <script src="http://rawgit.com/Lemoncode/lc-validation-summary/master/build/lcvalidationSummary-tpl.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://rawgit.com/Lemoncode/lc-validation-summary/master/build/lcValidationSummary.css" />
  </head>

  <body ng-app="sampleApp" ng-controller="sampleController" lc-validations-container="">
  <br>
    <form name="userForm">
      <label for="userName">Name:</label>
      <input id="userName" name="userName" type="text" ng-model="model.name" ng-required="true" lc-validation-bubble="" validation-friendly-name="User Name" />
      <label for="userSurname">Surname:</label>
      <input id="userSurname" name="userSurname" type="text" ng-model="model.surName" ng-required="true" lc-validation-bubble="" validation-friendly-name="User Surname" />
    </form>
    <div lc-validation-summary=""></div>
  </body>

</html>
This sample shows a simple use of the [lcValidationSummary](http://lemoncode.github.io/lc-validation-summary/) 
angularjs directive, by including only a form containing two inputs.

The form is contained inside a div declaring the `lc-validations-container` 
directive.

Both inputs in the form make use of the `lc-validation-bubble` directive, which 
is in charge of notifying the validation results to the `lc-validations-container`.

These inputs use the angular `ng-required` directive, which is one of the angular 
validations supported by `lcValidationSummary` and must set the parameter 
`validation-friendly-name` to a friendly name describing the input content to 
the user.

In this sample, the validation message is *"this field is mandatory"*; the
associated message to the angular ng-required directive.

Check out more advanced samples to see how to set your **custom messages and** 
**directives**.

Finnaly, the `lc-validation-summary` directive will add the list of non-passing 
validations to the UI.
var sampleApp = angular.module('sampleApp', ['lcValidationSummary'])

.controller('sampleController', ['$scope', function sampleController($scope){	
	$scope.model = {
		name:"",
		surName:""
	};
}]);