I mentioned that this is a perfect place for a directive however I realize that directives can be difficult to understand at first glance. Directives are used to link in with the DOM. Rendering HTML within Angular should usually be limited to directives.
You would modify your HTML to have the directive.
<tr ng-repeat="person in data.people">
<td class="text-left">
<div myapp-initials="person" ></div>
</td>
</tr>
Your angular module would no longer contain a factory definition but a directive definition.
angular.module('myapp.directives', [])
.directive('myappInitials', function () {
return {
restrict: 'A',
template: "<div style='background-color:{{myappInitials.IconColor}}' class='userIconMedium'>{{myappInitials.Firstname.charAt(0) + ' ' + myappInitials.Surname.charAt(0)}}</div>",
scope: {
myappInitials: "="
}
};
});
I have created a plunker to demonstrate how to use a directive in your situation.