How To Retrieve Image From A Web Server Url Path To Angularjs

I am trying to retrieve images from my web server (on port 9100) to display on my angularJS page. I wanted to display the image in the particular cell in my table. Example like: '0

Solution 1:

To achieve the expected result, i have used few sample images with the assumption that the data from the backend will be in the format as below

$scope.records=[{"id":23,"cameraid":"001","timestamp":"2016/06/15 17:27","filename":"http://www.w3schools.com/css/img_fjords.jpg"}, 

{"id":24,"cameraid":"002","timestamp":"2016/06/15 17:28","filename":"http://www.w3schools.com/css/img_forest.jpg"}, {"id":25,"cameraid":"003","timestamp":"2016/06/15 17:28","filename":"http://www.w3schools.com/css/img_lights.jpg"}, {"id":26,"cameraid":"003","timestamp":"2016/06/15 17:28","filename":"http://www.w3schools.com/css/img_mountains.jpg"}]

Codepen URL - http://codepen.io/nagasai/pen/jrMboq for reference.

Hope this works for you :)