$filter in a AngularJS component & $locale are not parts of the digest cycle. In that way you are not be able to trigger a automatic $scope update by changing the $locale configuration object. In my opinion, its the best way to not use $locale as a part of your digest cycle (cause you are not able to do it that way).
You should persist your currency configuration in a global available variable or factory (which is a part of the digest cycle). You could use $rootScope to make your E2E binding work in a nice way. Also set your currency in $locale.NUMBER_FORMATS.CURRENCY_SYM to proceed with this configuration in other code parts.
View:
<div ng-controller="MyCtrl">
{{ value | currency: $root.currencySymbol }}
</div>
AngularJS application:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope, $rootScope, $filter, $locale, $http, $timeout) {
$scope.value = 0.00;
$rootScope.currencySymbol = $locale.NUMBER_FORMATS.CURRENCY_SYM;
$http.get('https://jsonplaceholder.typicode.com/posts').then(function (result) {
$rootScope.currencySymbol = '€';
$locale.NUMBER_FORMATS.CURRENCY_SYM = '€';
});
});
>> Demo fiddle
Same approach by using a factory:
View
<div ng-controller="MyCtrl">
{{ value | currency: $root.currencyHandler.symbol }}
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function (
$scope,
$rootScope,
$filter,
$locale,
$http,
$timeout,
currencyHandler
) {
$scope.value = 0.00;
$rootScope.currencyHandler = currencyHandler;
$http.get('https://jsonplaceholder.typicode.com/posts').then(function (result) {
currencyHandler.setCurrencySymbol('€');
});
});
myApp.factory('currencyHandler', function ($locale) {
return {
symbol: $locale.NUMBER_FORMATS.CURRENCY_SYM,
setCurrencySymbol: function (value) {
this.symbol = value;
$locale.NUMBER_FORMATS.CURRENCY_SYM = value;
}
}
});
>> Demo fiddle
An other approach by using $watch inside a factory:
In that way you are able to set $locale.NUMBER_FORMATS.CURRENCY_SYM directly in your controller logic:
View
<div ng-controller="MyCtrl">
{{ value | currency: $root.currencyHandler.symbol }}
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function (
$scope,
$rootScope,
$filter,
$locale,
$http,
$timeout,
currencyHandler
) {
$scope.value = 0.00;
$rootScope.currencyHandler = currencyHandler;
$http.get('https://jsonplaceholder.typicode.com/posts').then(function (result) {
$locale.NUMBER_FORMATS.CURRENCY_SYM = '€'
});
});
myApp.factory('currencyHandler', function ($locale, $rootScope) {
let currencyHandler = {
symbol: $locale.NUMBER_FORMATS.CURRENCY_SYM
};
$rootScope.$watch(function () {
return $locale.NUMBER_FORMATS.CURRENCY_SYM;
}, function (value) {
currencyHandler.symbol = value;
});
return currencyHandler;
});
>> Demo fiddle
