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

angular
1

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="!tm.events" 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>
   <div ng-class="{'calendar-event-wrap': tm.events}" ng-show="tm.events">
      <div ng-repeat="displayEvent in tm.events" 
             class="calendar-event" 
             ng-click="eventSelected({event:displayEvent.event})"
             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>
      </div>
   </div>
</td>

How can I set conditionals in my bindings like this?

2

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.