I am seeing unexpected behaviour differences when using Angular interpolation {{ blah }} as opposed to ng-bind='blah' when using ng-translate. So given a really simple controller with
$scope.name = "Angular"
the following works perfectly using both interpolation and ng-bind ..
<div>Interpolation : Hello {{ name }}</div>
<div>ng-bind : Hello <span ng-bind="name"/></div>
outputting
Interpolation : Hello Angular
ng-bind : Hello Angular
Now, introduce ng-translate, first setup simple translation table ..
$translateProvider.translations('en', {
'WELCOME-INTERPOLATE': 'Hello {{ name }}',
'WELCOME-BIND': 'Hello <span ng-bind="name"/>'
});
and then
<span translate translate-values="{name: name}">WELCOME-INTERPOLATE</span>
<span translate translate-values="{name: name}">WELCOME-BIND</span>
which produces
Hello Angular <-- This is interpolate
Hello <-- This is ng-bind and **fails**
and then by adding 'translate-compile' which as I understand it removes the need for 'translate-values' and gives 'translate' access to its parent scope, the same HTML with 'translate-compile' replacing 'translate-values'
<span translate translate-compile>WELCOME-INTERPOLATE</span>
<span translate translate-compile>WELCOME-BIND</span>
produces opposite result
Hello <-- This is interpolate and **fails**
Hello Angular <-- This is ng-bind
See my plunk for example
