iOS/OS X-like contact initials circle

iOS/OS X like contact circle with contact's name initials.

by maremp

HTML

<body ng-app="bindExample">
    <div ng-controller="ExampleController">
        <span class="contact" ng-attr-data-shortname="{{initials}}"></span>
        
        <br />
        Enter name: <input type="text" ng-model="name" />   
    </div>
</body>

CSS

.contact:before {
    position: absolute;
    height: 16px;
    width: 30px;
    left: 50%;
    margin-left: -15px;
    top: 50%;
    margin-top: -8px;
    text-align: center;
    content: attr(data-shortname);
}

.contact {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #b7b7b7;
    color: white;
    border-radius: 100%;
    font-family: Helvetica, sans-serif;
    font-size: 1em;
    position: relative;
}

JavaScript

angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
        $scope.name = 'test';
        $scope.$watch('name', function(e) {
            var n = e.trim().split(' ');
            $scope.initials = ((n[0][0] || '') + (n.length > 1 ? n[n.length - 1][0] : '')).toUpperCase();
        }, true);
}]);