Angular: Empty Fiddle

http://angularjs.org/

by Massimo Rangoni

HTML

<script src="http://code.angularjs.org/1.0.2/angular.js"></script>
<div ng-controller="myCtrl">    
    <img check-image ng-src="{{img}}" alt="Image" >
</div>

CSS

img {
  width: 100%;    
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp
  .config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
myApp.directive('checkImage', function($http) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            attrs.$observe('ngSrc', function(ngSrc) {
                $http.get(ngSrc).success(function(){
                    alert('image exist');
                }).error(function(){
                    alert('image not exist');
                    element.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg'); // set default image
                });
            });
        }
    };
});

function myCtrl($scope){
    $scope.img = 'http://www.example.com/image_not_exist.png'; // img not exist    
}