title: AngularJS - HTML in JS - Escaping single quote
body: <p>I need to do this in javascript, I can't do it in the html (at least not without breaking everything, I hope to put it out into the html later on). </p>
  
  <p>If it was in plain html, the div would look like this (<strong>'my-border'</strong>): </p>
  
  <pre><code>&lt;div class="col-xs-12" ng-class="{'my-border': hasBorder"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>But since it's in javascript, the whole html line needs to be surrounded in single quotes
  (<strong>'my-border'</strong>): </p>
  
  <pre><code>template: '&lt;div class="col-xs-12" ng-class="{'my-border': hasBorder"&gt;...&lt;/div&gt;'
  </code></pre>
  
  <p>I've tried the following (from <a href="https://stackoverflow.com/questions/2428572/how-to-escape-single-quote">this stackoverflow question</a>):</p>
  
  <p><strong>"my-border"</strong></p>
  
  <pre><code>template: '&lt;div class="col-xs-12" ng-class="{"my-border": hasBorder"&gt;...&lt;/div&gt;'
  </code></pre>
  
  <p><strong>\'my-border\'</strong> </p>
  
  <pre><code>template: '&lt;div class="col-xs-12" ng-class="{\'my-border\': hasBorder"&gt;...&lt;/div&gt;'
  </code></pre>
  
  <p><strong>&#39;my-border&#39;</strong></p>
  
  <pre><code>template: '&lt;div class="col-xs-12" ng-class="{&amp;#39;my-border&amp;#39;: hasBorder"&gt;...&lt;/div&gt;'
  </code></pre>
  
  <p>But I get <strong>Syntax Error: Unexpected String</strong></p>
  
  <p>I am new to this group, so I first searched the archives and didn't find anything. 
  If anyone could help me out or link me to an existing topic, I would really appreciate it!</p>
  
  <p>Thank you so much for your time!!</p>
  
  <p>Shannon :]</p>