Atmosphere.js package, angular-templates, throws error on less than operator in my binding


The Error being thrown

=> Errors prevented startup:                  
   While processing files with angular-templates (for target web.browser):
   client/templates/rcalendar/day.html:7: Expected tag name after `<`
   ...            {{$index<12?($index === 0?12:...
   client/templates/rcalendar/week.html:16: Expected tag name after `<`
   ...            {{$index<12?($index === 0?12:...

The offending HTML

<td class="calendar-cell">
   <div class="add_event_shade" style="height:100%;" ng-if="!" ng-show"clickCount" on-touch="hourTouch($event)">
      <p style="display:none;">+ New event</p>
      <p style="display:none;">{{$index<12?($index === 0?12:$index)+':00 am':($index === 12?$index:$index-12)+':00 pm'}}</p>
   <div ng-class="{'calendar-event-wrap':}" ng-show="">
      <div ng-repeat="displayEvent in" 
             ng-style="{left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', top: displayEvent.event.startTimeOffset+'%', height: 37*(displayEvent.event.totalApptTime)+'px'}">
          <div class="calendar-event-inner" style="white-space: pre-wrap; font-weight: bold">{{displayEvent.event.title}}</div>

How can I set conditionals in my bindings like this?


Seems the only solution per the answers to my Stack Overflow question is to move the conditional logic out of the binding and into a named function in the controller. Then call the named function in the template binding while passing in the $index parameter.