The example above is a PickList in JSF. In one of my project, I need such component working in angularjs fashion. I did not find one by googling around. I decided to code one by myself. This is first version: https://github.com/jasonzhang2022/picklist.
Here is an exmaple how to use it.
<select name="pktest" size="20"data-ng-options="v.name for v in toptions"data-picklist="" multiple data-ng-model="tselected"></select>data-ng-options and data-ng-model are directives from angularjs itself. data-picklist is from this component. Once <select> is decorated with all the three attributes, you have an PickList.
Angularjs V.S JSF implementation.
For component user, angularjs approach is super easy, just one extra attribute for select element. PickList in PrimeFace is not so easy. First, you need to understand the data model behind the component. Second you need to add some classes and codes in server to work together with the PickList.
Again, angular js wins. All the html is a regular html template decorated with regular angularjs directives. You can replace with your own html template easily. I usually customize JSF component from JSF libraries. It is just really tough.