How to implement such a directive in Angular?

Question

Angular

Hello. I can't figure out how to implement a directive that will have one parameter - the user ID, which will receive information from it and display it.
Those. I want to create something like this directive:
<user id='123'></user>
A view for it is in a separate file (This is an example. The real template is much larger):
<span>{{user.name}}</span>
I understand how to create a directive that takes some value.

.directive('user', ['profile', function(profile) {
    return {
      restrict: 'E',
      replace: 'true',
      templateUrl:'user.html',
      scope: {
        id:'='
      },
    };
  }])

What I can't figure out is how to get the user object from the given value, and create a variable with this object in the local $scope of the directive.
I have a service with which you can get a user object by its ID
const user = profile.getById(templateAttrs.id);
But how to tie everything together