Image source is not binding with scope variable inside directive
<p>In the below HTML, I want to inject '<strong>src</strong>' value from scope variable in controller.   </p>

<p>HTML :</p>

<pre><code>&lt;customdir filterby="name" src="imgName"&gt;&lt;/customdir&gt;
</code></pre>

<p>The <strong>$scope.imgName</strong> variable in controller has the image path.  </p>

<p>Javascipt :</p>

<pre><code>var app = angular.module('myApp', []);

app.controller('myCtrl', function ($http, $scope) {

$scope.name = 'ready';
$scope.imgName = '~/Content/arrow-right-xxl.png';

)};

app.directive('customdir', function ($compile) {
var getTemplate = function (filter) {
    switch (filter) {
        case 'ready': return '&lt;div class="col-lg-1" id="ready"&gt;' +
                    '&lt;img src={{src}} style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" /&gt;' +
                '&lt;/div&gt;';
        default: return '&lt;input type="text" ng-model="filterby" /&gt;';           
    }
}
return {
    restrict: 'E',
    scope: {
        src: '@',
        filterby: "="
    },
    link: function (scope, element, attrs) {
        var el = $compile(getTemplate(scope.filterby))(scope);
        element.replaceWith(el);
    }
};
});
</code></pre>