What do you see here?
The first tab is a pure AngularJS view that communicates with
the back-end via <ngsync>.
If the check box "update immediately" is set, the view
communicates with the server using the Javascript API of ngsync.
If "update immediately" is not set, an AngularFaces button is shown.
In this case it suffices to define (and to click) the button to synchronize the AngularJS model
(just the way you're used to from other JSF applications).
Brand and type aren't independent fields. Choosing a brand
limits the list of types. Which type matches which brand is
calculated on the server. However, this is one of the tasks you need
client support for: when the user changes the brand, AngularJS
clears the type. If it doesn't, the back-end logic detects the
mismatch and sets the brand back to the original value (because
setBrand is called first and setType is called second).
If we were to omit the settings above, the first tab didn't contain native JSF code.
In such a case you have to load the JSF Javascript library manually:
<h:outputScript library="javax.faces" name="jsf.js" />
The second tab is a pure Mojarra or MyFaces view that doesn't
use <ngsync>. Instead, it uses several AngularJS mustaches.
This is a HTML5 JSF approach. The JSF page uses almost
exclusively the new HTML5 friendly markup, but it doesn't use fancy
stuff like ngsync. It only uses <translate> to support forein
languages and brings the JSR303 bean validation to the client.
Note that this view can't use AJAX because it's based on
Mojarra (or MyFaces). AJAX doesn't recover the way the basic JSF
libraries manipulate the DOM tree. AngularJS relies on jQuery to
manipulate the DOM, but the basic JSF libraries don't require (and
consequently don't use) jQuery. If you need AJAX, use PrimeFaces 5+.
Depending on which browser you use, the birth date field may
be difficult on non-english computers. Google Chrome, for instance,
distinguishes between the preferred page language and the language
used to display the browser. Unfortunately, the data picker uses the
latter locale, whereas JSF expects the former. A - say - French
browser may run into difficulty when displaying an English JSF
application.
You also have to specify a date converter the date field (such
as the birthday). AngularFaces can't add it automatically yet.