Ref : https://github.com/WURFL/angular-wurfl-image-tailor
Add ng-app
var app = angular.module("demoapp", ["angular-wurfl-image-tailor"]);
Replace
<img> your image url</img>
with
<img-wit> your image url </img-wit>
<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="200" h="200"> </img-wit>
Replace with a directive and use data binding
<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="{{image_width_desktop}}" h="{{image_width_desktop}}"> </img-wit>
and for mobile devices
<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="{{image_width_mobile}}" h="{{image_width_mobile}}"> </img-wit>
We can input maximum width as a directive according to various screen sizes.