title: Syntax Error: Token '<' not a primary expression
body: <p>I am getting a below error when i try to do the below:</p>
  
  <p><a href="https://docs.angularjs.org/error/$parse/syntax?p0=%3C&amp;p1=not%20a%20primary%20expression&amp;p2=7&amp;p3=%7Bleft:%3Cimageid,right:%20%3Eimageid," rel="nofollow noreferrer">https://docs.angularjs.org/error/$parse/syntax?p0=%3C&amp;p1=not%20a%20primary%20expression&amp;p2=7&amp;p3=%7Bleft:%3Cimageid,right:%20%3Eimageid,</a></p>
  
  <p>Controller:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function MyCtrl($scope) {
      angular.forEach(document.querySelectorAll(".q"), function(val, key) {
          (function(key, val) {
           console.log(val.getAttribute("ng-class").replace(/\{{([ind]+)\}}/g, key));
        })(key, val);
  
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ng-invalid { 
      border: 1px solid red; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app=""&gt;
    &lt;div ng-controller="MyCtrl"&gt;
        &lt;div ng-class="{x:{{ind}}&lt;id,y:{{ind}} &gt;id, z :{{ind}} == id}" class="q"&gt;&lt;/div&gt;
        &lt;div ng-class="{x:{{ind}}&lt;id,y:{{ind}} &gt;id, z :{{ind}} == id}" class="q"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above code prints fine in console replacing {{ind}} values perfectly, but when the application executes i get the below error: </p>
  
  <blockquote>
    <p>Syntax Error: Token '&lt;' not a primary expression at column 7 of the
    expression [{x:id,] starting at [{4}].</p>
  </blockquote>