fix($interpolate): use the first end symbol that forms a valid expression

When an interpolation string has multiple end symbol choices, pick the
occurrence that forms a valid expression

Closes #8642

Author: lgalfaso

src/ng/interpolate.js

@@ -193,17 +193,57 @@ function $InterpolateProvider() {
           textLength = text.length,
           exp,
           concat = [],
-          expressionPositions = [];
+          expressionPositions = [],
+          state = 0,
+          brackets = {"(": 0, ")": 0, "{": 0, "}": 0, "[": 0, "]": 0},
+          bracketChars = "(){}[]",
+          ch,
+          i;
 
       while(index < textLength) {
         if ( ((startIndex = text.indexOf(startSymbol, index)) != -1) &&
              ((endIndex = text.indexOf(endSymbol, startIndex + startSymbolLength)) != -1) ) {
           if (index !== startIndex) {
             concat.push(unescapeText(text.substring(index, startIndex)));
           }
+          index = startIndex + startSymbolLength;
+          while (index !== endIndex || state !== 0 || brackets['('] !== brackets[')'] ||
+              brackets['['] !== brackets[']'] || brackets['{'] !== brackets['}']) {
+            if (index === endIndex) {
+              endIndex = text.indexOf(endSymbol, endIndex + 1);
+              if (endIndex === -1) {
+                break;
+              }
+            }
+            ch = text[index];
+            switch (state) {
+            case 0:
+              if (ch === "'") state = 1;
+              if (ch === '"') state = 3;
+              if ((i = bracketChars.indexOf(ch)) != -1) {
+                brackets[ch]++;
+              }
+              break;
+            case 1:
+              if (ch === '\\') state = 2;
+              if (ch === "'") state = 0; 
+              break;
+            case 2:
+              state = 1;
+              break;
+            case 3:
+              if (ch === '\\') state = 4;
+              if (ch === '"') state = 0; 
+              break;
+            case 4:
+              state = 3;
+              break;
+            }
+            index++;
+          }
           exp = text.substring(startIndex + startSymbolLength, endIndex);
-          expressions.push(exp);
           parseFns.push($parse(exp, parseStringifyInterceptor));
+          expressions.push(exp);
           index = endIndex + endSymbolLength;
           expressionPositions.push(concat.length);
           concat.push('');

test/ng/interpolateSpec.js

@@ -105,7 +105,7 @@ describe('$interpolate', function() {
       expect(function() {
         $interpolate('{{\\{\\{foo\\}\\}}}')(obj);
       }).toThrowMinErr('$parse', 'lexerr',
-        'Lexer Error: Unexpected next character  at columns 0-0 [\\] in expression [\\{\\{foo\\}\\]');
+        'Lexer Error: Unexpected next character  at columns 0-0 [\\] in expression [\\{\\{foo\\}\\}]');
     }));
 
 
@@ -116,6 +116,14 @@ describe('$interpolate', function() {
     it('should evaluate expressions between escaped start/end symbols', inject(function($interpolate) {
       expect($interpolate('\\{\\{Hello, {{bar}}!\\}\\}')(obj)).toBe('{{Hello, World!}}');
     }));
+
+    it('should pick the first end symbol location that forms a valid expression', inject(function($interpolate) {
+      expect($interpolate('{{{}}}')(obj)).toBe('{}');
+      expect($interpolate('{{"{{ }}"}}')(obj)).toBe('{{ }}');
+      expect($interpolate('{{{foo: "bar"}}}')(obj)).toBe('{"foo":"bar"}');
+      expect($interpolate('{{{foo: {"bar": "baz"}}}}')(obj)).toBe('{"foo":{"bar":"baz"}}');
+      expect($interpolate('{{[{foo: {"bar": "baz"}}]}}')(obj)).toBe('[{"foo":{"bar":"baz"}}]');
+    }));
   });