In this example of <code>Ng-Src</code>, We are passing a function to <code>ng-src</code> like:And function definition is like: <code>$scope.getImageUrl</code> = function () { return "http://learnit.visrosoftware.com/datafiles/src-function.jpg"; };
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container well text-center">
<h2 class="text-primary">Calling function on ng-src</h2>
<img ng-src="{{getImageUrl()}}" height="300" />
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.getImageUrl = function () {
return "http://learnit.visrosoftware.com/datafiles/src-function.jpg";
};
}]);
</script>
</body>
</html>