AngularJS displays svg file on page

Question

I have an angularJS function that reads data from a json file and returns me an object with multiple SVG image file names.

I have ng-repeat on the return object to view and display all SVG files on the page.

Here is my ng-repeat on my template

<div ng-repeat="items in libCtrl.categories track by $index">
  <div ng-include="img/library/items.categoryImage"></div>
</div>

This code does not display the SVG image file on the page. But if I hardcode the value of the file names in ng-include, it works.

<div ng-repeat="items in libCtrl.categories track by $index">
  <div ng-include="'img/library/myfile.svg'"></div>
</div>

How can I make it work using the data from my items.categoryImage?

Answer 1

Check out a working demo: Plunker .

Use <div ng-include="'img/library/' + items.categoryImage"></div>