Angular ng-src onerror such as image resolves to a broken src

ng-src-onerror.js

/**
* First is the Angular Directive method of solving.
* Second is the inline onerror fix that results in a default image.
* SOURCE: http://stackoverflow.com/questions/27549134/angularjs-ng-src-condition-if-not-found-via-url
*/ 

var myApp = angular.module('myApp',[]);

myApp.directive('onErrorSrc', function() {
    return {
        link: function(scope, element, attrs) {
          element.bind('error', function() {
            if (attrs.src != attrs.onErrorSrc) {
              attrs.$set('src', attrs.onErrorSrc);
            }
          });
        }
    }
});

<img ng-src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/>


// Angular inline onerror fix that results in a default image.
<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>

good solution.

I needed to load an image potentially from two different folders, if it did not exist in the first folder, then angular would look for that same image in the second folder. Simple directive and very helpful. Thanks for sharing.