Plunker - Angular Avatar is a simple and lightweight AngularJS directive that generates a letter's avatar like Google does in several web apps. First letter of each word in a string or a group of initials will be used to generate the avatar. The image of the avatar will be rendered in an html img tag as a real png or jpeg. This image data can be retrieved using js to store an initial profile picture in your web or mobile apps when the user does not upload one. Several angular atributes are available to configure the output: shape, resolution, colors. Plunker is loading… I eat z-index for breakfast.