How to configure AngularJS

The simplest way to get an AngularFaces application running is to add ng-controller and ng-app to the <body> tag. It's also possible to add the ng-controller to any other JSF component. The important bit is ordinary HTML tags don't work - in particular <div> doesn't. A future version of AngularFaces will fix it (it will allow to use at least the two most popular tags <div> and <span>).

The complete set of attributes to activate AngularJS is shown in this snippet:

<h:body id="angular" 
        ng-app="CarDealer" 
        ng-controller="CarDealerController" 
        angularJSFile="filter.js">

It's a good idea to attach the id "angular" to the <body> tag. In theory, it can also be at different places, but putting it at the root guarantees it can always be referenced without any prefixes.
ng-app is identical to the ng-app attribute of AngularJS (it's a pass-through attribute).
ng-controller is identical to the ng-controller attribute of AngularJS (it's a pass-through attribute).
angularJSFile is an optional attribute to define the file containing your AngularJS controller. By default, AngularFaces loads the file "main.js" in the folder of the JSF file.

Using ng-controller in a <div>

Due to a bug it's a tad difficult to use ng-controller in a div. You have to replace the <div> by <h:panelGroup>. But since there's a second bug, that still doesn't do the trick. You have to use both:

<h:body id="angular" style="padding-left:10px">
  <form id="myForm" style="width: 700px">
    <h:panelGroup ng-app="CarDealer" ng-controller="CarDealerController" angularJSFile="index.js">
      <div ng-app="CarDealer" ng-controller="CarDealerController">

Of course, that's a work-around that will break in AngularFaces 2.1, which fixes both bugs.