How to fix the Angular syntax parser error within a Struts 2 <s:checkbox> tag?

I have encountered a strange error using AngularJS + Struts 2.

I have a Java object form with a boolean attribute named paid.

When I write:

<div class="col-sm-10 form-checkbox">
    <s:checkbox name="xxxxx" ng-model="model" 
        ng-init="model = <s:property value = '%{form.paid}' />" 
        theme="simple" />
</div>

I get FireBug complaining about AngularJS syntax parser error which directs me to this page:

syntax error page

suggesting expression error.

And if I write:

<div class="col-sm-10 form-checkbox">
    <s:checkbox name="xxxxx" ng-model="model" 
        ng-init="%{form.paid}" 
        theme="simple" />
</div>

No error is reported. I guess it is because Struts tags begin with <, which is not welcomed in Angular.

But, with this line no error is reported:

<select ng-model="estadoId" 
        ng-init="estadoId=<s:property value='%{form.estadoId}'/>"
        name="form.estadoId" id="form.estadoId" 
        value="<s:property value='%{form.estadoId}' />"    >

So, AngularJS is complaining about <> in Struts 2? Or, I am nor permitted to use <s:...> inside another <s:...>? If the latter is the case, why is complaning Angular not Struts 2??

Solution

In the first snippet, you are nesting Struts tags, that is a syntax error:

<s:checkbox name="xxxxx" 
        ng-model="model" 
         ng-init="model = <s:property value = '%{form.paid}' />" 
           theme="simple" />

In the second one, you are doing it right with OGNL, but you omitted the model = part:

<s:checkbox name="xxxxx" 
        ng-model="model" 
         ng-init="%{form.paid}" 
           theme="simple" />

The right version is the mix of the two:

<s:checkbox name="xxxxx" 
        ng-model="model" 
         ng-init="model = %{form.paid}" 
           theme="simple" />

Otherwise you could use a raw HTML tag (as in your <select> example, that is a standard HTML tag and not an <s:select>, hence no tags nesting is happening):

<input type="check" name="xxxxx" 
        ng-model="model" 
         ng-init="model = %{form.paid}" />

Note: in that case, you should create an hidden parameter under each checkbox to emulate the <s:checkbox> tag behavior and make the Checkbox Interceptor happy.