How to add an attribute with HTML other than adding it to the end of the tag?

Question

I'm implementing the below code which I got from an angularjs table sort function .

You can see below that ts attributes are being added to the html. However, this isn't an acceptable form to be hosted on Salesforce. Is there another way to add an attribute besides by the method shown below?

<table class="table" ts-wrapper>
  <thead>
    <tr>
      <th ts-criteria="Id">Id</th>
      <th ts-criteria="Name|lowercase" ts-default>Name</th>
      <th ts-criteria="Price|parseFloat">Price</th>
      <th ts-criteria="Quantity|parseInt">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items track by item.Id" ts-repeat>
      <td>{{item.Name}}</td>
      <td>{{item.Price | currency}}</td>
      <td>{{item.Quantity}}</td>
    </tr>
  </tbody>
</table>

See here for codepen of the code I'm try: http://codepen.io/chriscruz/pen/emzvjo?editors=101

Here is my attempt using some of the suggestions below: http://codepen.io/chriscruz/pen/vEKxVg

Answer 1

You could try prefixing them with data- so they become html5 complaint and angular parses them too. If there is still an issue with standalone attribute example ( data-ts-wrapper ) then probably you could just provide a value for them, example- data-ts-wrapper="ts-wrapper" (Since it looks like those directives does no expect any expression anyways as its value).

So try:

<table class="table" ts-wrapper="ts-wrapper"> <!-- or try  ts-wrapper="ts-wrapper"--> 
  <thead>
    <tr>
      <th ts-criteria="Id">Id</th>
      <th ts-criteria="Name|lowercase" ts-default="ts-default">Name</th>
      <th ts-criteria="Price|parseFloat">Price</th>
      <th ts-criteria="Quantity|parseInt">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items track by item.Id" ts-repeat="ts-repeat">
      <td>{{item.Name}}</td>
      <td>{{item.Price | currency}}</td>
      <td>{{item.Quantity}}</td>
    </tr>
  </tbody>
</table>