usage.html

<user-avatar id="my-ids" class="my-classes" user="userObject"></user-avatar>

userAvatarDirective.js

app.directive('userAvatar', ['$q', function ($q) {
  return {
    restrict: "EA",
    scope: {
      user: '=user'
    },
    link: function ($scope, element, attrs) {
      var colors = [
        '#f9b800',
        '#000000',
        '#f78988',
        '#7dc5f3',
        '#81cd8e',
        '#9d83bf',
        '#2b4c70',
        '#363b47',
        '#e2008f',
        '#1e5b9e',
        '#a51800',
        '#d15400',
      ];
 
      var getAvatarUrl = function (user) {
        if (user && user.provider) {
          if (user.provider.match(/facebook/)) {
            return 'http://graph.facebook.com/' + user.uid + '/picture' + '?' + moment().format('DDMMYYYY');
          }
          else if (user.provider.match(/google/)) {
            return 'https://profiles.google.com/s2/photos/profile/' + user.uid + '?' + moment().format('DDMMYYYY');
          }
        }
        return false;
      };
 
      var preloadImage = function(src) {
        var deferred = $q.defer(),
            image = new Image();
 
        if (!src) {
          deferred.reject();
          return deferred.promise;
        }
 
        image.onerror = function() {
          deferred.reject();
        };
        image.onload = function() {
          deferred.resolve(src);
        };
        image.src = src;
        return deferred.promise;
      };
 
      preloadImage(getAvatarUrl($scope.user)).then(function(src) {
        element.html('<img src="' + src + '"/>')
      }, function() {
        var character = ($scope.user.name || '').charAt(0),
            color = colors[character.charCodeAt(0) % colors.length];
 
        element.html('<div style="background:' + color + '" id="' + element[0].id + '" class="st-navbar-alternative-avatar ' + element[0].className + '"><div class="envelope"><span>' + character + '</span></div></div>')
      });
    }
 
  };
}]);