mdContactChip: breaks when using custom interpolation symbol

[dephiros]

Actual Behavior:

• What is the issue? * Using interpolation symbol [[ ]] breaks contacts chip
• What is the expected behavior? Contact chip should not error

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/dephiros/pen/aBBYzM?editors=0011
• Details: select autocomplete input, start typing

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 54.0.2840.98 (64-bit)
• OS: * Mac
• Stack Traces:

angular.js:13920 Error: [$parse:ueoe] Unexpected end of expression: item[$mdContactChipsCtrl.contactImage
http://errors.angularjs.org/1.5.8/$parse/ueoe?p0=item%5B%24mdContactChipsCtrl.contactImage
    at https://10.11.1.100/lib/js/angular.js:68:12
    at AST.consume (https://10.11.1.100/lib/js/angular.js:14562:13)
    at AST.primary (https://10.11.1.100/lib/js/angular.js:14453:14)
    at AST.unary (https://10.11.1.100/lib/js/angular.js:14421:19)
    at AST.multiplicative (https://10.11.1.100/lib/js/angular.js:14408:21)
    at AST.additive (https://10.11.1.100/lib/js/angular.js:14399:21)
    at AST.relational (https://10.11.1.100/lib/js/angular.js:14390:21)
    at AST.equality (https://10.11.1.100/lib/js/angular.js:14381:21)
    at AST.logicalAND (https://10.11.1.100/lib/js/angular.js:14373:21)
    at AST.logicalOR (https://10.11.1.100/lib/js/angular.js:14365:21)
    at AST.ternary (https://10.11.1.100/lib/js/angular.js:14351:21) <!-- mdAutocompleteParentScope: -->(anonymous function) @ angular.js:13920(anonymous function) @ angular.js:10467invokeLinkFn @ angular.js:9936nodeLinkFn @ angular.js:9335compositeLinkFn @ angular.js:8620nodeLinkFn @ angular.js:9330compositeLinkFn @ angular.js:8620publicLinkFn @ angular.js:8500lazyCompilation @ angular.js:8844boundTranscludeFn @ angular.js:8637controllersBoundTransclude @ angular.js:9385VirtualRepeatController.getBlock_ @ angular-material.js:22337VirtualRepeatController.readItemSize_ @ angular-material.js:22119(anonymous function) @ angular-material.js:22170(anonymous function) @ angular.js:1247$watchCollectionAction @ angular.js:17385$digest @ angular.js:17524$apply @ angular.js:17790(anonymous function) @ angular.js:19621completeOutstandingRequest @ angular.js:5964(anonymous function) @ angular.js:6243

---

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

[Splaktar]

Updated CodePen for 1.1.7 still demonstrates this issue.

[Splaktar]

It looks as though the getters in https://docs.angularjs.org/api/ng/provider/$interpolateProvider would need to be called to get the start and end symbols and then those should be saved and used in the component's template which has many cases of {{}}. MD_CONTACT_CHIPS_TEMPLATE in MdContactChips would probably need to be moved into a function that would apply the proper symbols and return the template.

It's likely that this problem exists for the majority of AngularJS Material components.