Angularjs filter overriding after onload

Question

I have defualt currency filter on my page, using angularjs syntax

{{ '200' | currency:"USD$" }}

After my page's load, I would like to override the currency code by a click action. How can I do that?

On page load

$200

After javascript call

€200

Answer 1

Don't use filter in binding but in controller:

myModule.controller("myCtrl", ["$scope", "currencyFilter", function($scope, currencyFilter) {
    $scope.myValue = 200;
    $scope.myCurrency = currencyFilter($scope.myValue, "USD$");
    $scope.updateToEuro = fucntion() {
        $scope.myCurrency = currencyFilter($scope.myValue, "EURO€");
    }
}

Then your binding become:

<span ng-click="updateToEuro()">{{ myCurrency }}</span>

Answer 2

you can do this

myModule.controller("myCtrl", ["$scope", function($scope) {

    $scope.Value = 200;

    $scope.currencyType = "$";

    $scope.changeCurrencyType = function(){
     $scope.currencyType = "€";
    }

}

and html code like this

<button type="button" ng-click="changeCurrencyType()">Change Language</button>

<div>{{Value}}{{currencyType}}</div>

hope this works for you.