angularjs show initials of user first name and last name as profile icon

Use below directive:

app.directive('showInitials', function() {
    return function(scope, element, attrs) {
        var userVals = attrs.showInitials;
        var arrUserVals = userVals.split(',');
        if(arrUserVals[0] == "" || arrUserVals[0].lastIndexOf('default-image.png') != -1){
            var initialStr = (arrUserVals[1].substr(0, 1) + "" + arrUserVals[2].substr(0, 1)).toUpperCase();;
            var initialHtml = '<div class="avatar-framed text">'+initialStr+'</div>';
            $(element).parent().html(initialHtml);
        }
    }
});

Use this directive in your html like:

<img ng-src='{{user.picture}}' data-holder-rendered="true"
                                class="avatar-framed text"
                                show-initials="{{user.picture}},{{user.firstName}},{{user.lastName}}">

In css file make sure following classes exists:

.avatar-framed {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: white;
    line-height: 0px;
    color: white;
    background-color: #ccc;
    vertical-align: middle;
    text-align: center;
}

.avatar-framed.text {
    width: 50px;
    height: 50px;
    border: 2px solid white;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    line-height: 50px;
    font-size: 20px;
}

.avatar-frame, .avatar-frame img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 30px; /* Saf3+, Chrome */
    border-radius: 30px; /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px;  Disabled for FF1+ */
}