In this article I will explain with an example, how to dynamically change SRC of Image element on Click in AngularJS.
This article will illustrate how to dynamically change the SRC attribute of Image element when clicked using the ng-src directive in AngularJS.
The Image will be stored in a Folder (Directory) on the Server and will be displayed by assign the URL of the Image to the ng-src directive in AngularJS.
 
 
Dynamically change SRC of Image OnClick in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML Image element.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
Inside the Controller, an array of JSON objects is created and assigned to the Customers JSON array.
Each JSON object consists of the Customer Id, Name and Photo fields. The Photo field stores the URL of the Image.
The Image element has been assigned ng-click directive. When the Image is clicked, the ImageClick function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Inside the ImageClick function, based on the value of Index, an object is fetched from the Array and is assigned to the Customer variable.
Finally, the Photo value is assigned to the ng-src directive of the Image element.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $interval) {
            $scope.Customers = [
                    { CustomerId: 1, Name: "John Hammond", Photo: "Images/1.jpg" },
                    { CustomerId: 2, Name: "Mudassar Khan", Photo: "Images/2.jpg" },
                    { CustomerId: 3, Name: "Suzanne Mathews", Photo: "Images/3.jpg" },
                    { CustomerId: 4, Name: "Robert Schidner", Photo: "Images/4.jpg" }
                   ];
 
            //The Customer object is initially set to first item.
            $scope.Customer = $scope.Customers[0];
 
            //Index is initialized to 1.
            var index = 1;
 
            //The Image Click function.
            $scope.ImageClick = function () {
                //The Customer object is fetched and assigned to variable.
                $scope.Customer = $scope.Customers[index];
 
                //Index is incremented.
                index++;
 
                //Index is again set to 0 if it exceeds the Array length.
                if (index > $scope.Customers.length - 1) {
                    index = 0
                }
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <img ng-src="{{Customer.Photo}}" ng-click="ImageClick()" style="height: 100px; width: 100px;
            cursor: pointer" />
    </div>
</body>
</html>
 
 
Screenshot
Dynamically change SRC of Image on Click in AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code