How are the attribute prefixes “x-” and “data-” used in AngularJS

Question

I\'m new to Angular and trying to understand what the \"x-\" and \"data-\" prefixes mean. In the directives documentation (http://docs.angularjs.org/guide/directive) it says

Answer 1

From the HTML5 spec: http://www.w3.org/html/wg/drafts/html/master/single-page.html

Attribute names beginning with the two characters "x-" are reserved for user agent use and are guaranteed to never be formally added to the HTML language.

Also:

For markup-level features that are intended for use with the HTML syntax, extensions should be limited to new attributes of the form "x-vendor-feature", where vendor is a short string that identifies the vendor responsible for the extension, and feature is the name of the feature. New element names should not be created. Using attributes for such extensions exclusively allows extensions from multiple vendors to co-exist on the same element, which would not be possible with elements. Using the "x-vendor-feature" form allows extensions to be made without risk of conflicting with future additions to the specification.