Render unicode from scope variable to HTML using currency filter

Question

I need to show the dynamic currency symbol in HTML.

<span> Amount : {{140 | currency:symbol}}</span>

In controller, I am having a $scope variable which has the currency Unicode.

$scope.symbol = '$';

It is not rendering this ($) unicode as ($) in HTML.

If I changed like,

<span> Amount : {{140 | currency:'&#36;'}}</span>

it's working fine. But I need to give the unicide from $scope variable.

var app = angular.module('myapp',[]);

  app.controller('sample',function($scope){
    $scope.symbol = "$";
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="sample">
  <span> Amount : {{140 | currency:symbol}}</span> <br />
  
  <span> Amount : {{140 | currency:'&#36;'}}</span>
  
</div>