Image is not rendering as text, when I bind it with angular js model in UI

Question

I've created one jsfiddle for the same jsfiddle

sample HTML code

<div ng-app="myAppModule" ng-controller="someController">
<!-- Show the name in the browser -->
<!-- Bind the input to the name -->
<span ng-bind="showImage"></span>
</div>
<script>

</script>

sample angular js code

var myApp = angular.module('myAppModule', []);
myApp.controller('someController', function($scope) {
// do some stuff here
$scope.showImage="<a class='fancybox' href='http://i.imgur.com/9VFmFrN.jpg' data-fancybox-group='gallery' title='Personalized Title'><img class='MaxUploadedSmallSized' src='http://i.imgur.com/9VFmFrNs.jpg' alt=''></a>";

I'm trying to render image from angular js model on front end UI but it is coming as text.

I've tried $compile property of angular js too but that is not working too.

snapshot

Answer 1

Add a data structure to your controller that contains the relevant informations:

$scope.showImage=[];
$scope.showImage.Link='http://i.imgur.com/9VFmFrN.jpg';
$scope.showImage.Source='http://i.imgur.com/9VFmFrN.jpg';     
$scope.showImage.Title='Personalized Title';

The access it in your html as if you are using a template engine:

<div>
  <a class='fancybox' ng-href='{{showImage.Link}}' data-fancybox-group='gallery' title='{{showImage.Title}}'><img class='MaxUploadedSmallSized' ng-src='{{showImage.Source}}' alt=''></a>
</div>

Look here: Fiddle