Set image src in Angularjs

Question

Controller Code

myApp.controller("BaseController", ["$scope", function($scope) {
        $scope.imgProcessingUrl = appUrl + "Images/ajax-loader.gif";
    }
]);

here appUrl is http://localhost/sample/public/

Html Code

<img id="imgProcessing" ng-src="{{imgProcessingUrl}}" style="display:none;">

master.blade.php

<script>
    var appUrl = "{!! URL(''); !!}/";
</script>

Problem is: webpage always shows the rendered html like below.

<img id="imgProcessing" style="display:none;">

Am i missing something?

Answer 1

To make global variables available inside the controllers scope you must pass in the browsers $window object as a dependency.

myApp.controller("BaseController", ["$scope", "$window", function($scope, $window) {
        $scope.imgProcessingUrl = $window.appUrl + "Images/ajax-loader.gif";
    }
]);