Using traditional JSF AJAX with AngularJS

As a rule of thumb, don't use traditional JSF AJAX requests with AngularFaces. It's possible, but you're likely to run into all kinds of problems. In particular, expect memory leaks on the client side. This is because AngularJS assumes to control the HTML page itself. It doesn't expect third parties to modify the HTML page. But that's exactly what JSF AJAX requests do.

That said, here's how to do it:

Use PrimeFaces. For some reason AngularJS doesn't recover after a Mojarra request. Please drop me a note if you've figured out how to do it.
Make sure your AJAX requests update the entire region controller by the ng-app. Typically, that's the form or the body.

I've also seen people decorate the <html> tag with an ng-app, but you wouldn't want to do so in an AngularFaces application: JSF allows you to update the entire page (update="@all" or render="@all"), but that ruins your applications performance. So its better to use smaller regions as AngularJS applications.

Re-initialize AngularJS after completing the request. In the case of PrimeFaces, you simply add an oncomplete handler to the <prime:commandButton>:

<h:form id="myForm" ng-app="AngularFacesExamples" ng-controller="MyCtrl">
  <prime:panelGrid columns="3">
    <prime:inputText value="{{calculatorBean.number1}}" />
    <prime:inputText value="{{calculatorBean.number2}}"/>
    <prime:inputText value="{{calculatorBean.result}}"
           label="#{calculatorBean.resultCaption}" />
    <prime:commandButton value="Add on server (JSF AJAX)"
           action="#{calculatorBean.add}" update="@form" process="@form" oncomplete="findNGAppAndReinitAngular(getElementById('myForm'))" />
  </prime:panelGrid>
<prime:messages globalOnly="false" />
</h:form>