Is there a way to dynamically change the image source using ng-src? I've been attempting to switch the image file source based on an onclick event using the code below, but it's not working as expected.
<html ng-app="ui.bootstrap.demo">
<body>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<!-- Add DB names to label -->
<label class="btn btn-primary" ng-model="checkModel.left" ng-click="toggleImage()" btn-checkbox><img ng-src="{{imageSwapUrl}}" />Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox><img id="dbIcon" src="images/database-5-16.ico" />Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox><img id="dbIcon" src="images/database-5-16.ico" />Right</label>
</div>
<?php
// put your code here
?>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
$scope.imageSwapUrl = "images/database-5-16.ico";
$scope.checkModel = {
left: false,
middle: true,
right: false
};
$scope.toggleImage = function () {
if ($scope.imageSwapUrl === 'images/database-5-16.ico') {
$scope.imageSwapUrl = 'images/accept-database-16.ico';
} else {
$scope.imageSwapUrl = 'images/database-5-16.ico';
}
}
});
</script>
</body>
</html>
When testing the code above, the initial image file doesn't load, and I don't see any errors in the console log. Can anyone point out why this might be happening?