AngularJSのディレクティブで動的に作成したタグでバインドする方法


AngularJSについて質問です。

ディレクティブを使用して新しいDIVタグを追加し、そのDIVタグで値のバインドを行いたいのですがうまくいきません。  
例えば

sample.html

[code]

    <div ng-repeat="user in userList">
        <user-directive user="user">
    </div>
    
[/code]

sample.js

[code]

    app.module.directive("userDirective", function() {
        return {
            restrict : "E",
            scope : {"user" : "&"},
            link : function($scope, $element, $attrs){
                var user = $scope.user();
                var tag = $("<div>名前：{{user.name}} ({{user.age}})</div>");
                $element.append(tag);
            }
        }
    });
    
[/code]

といったコードの場合、

[code]

    名前：{{user.name}} ({{user.age}})
    
[/code]

の部分でバインドしてほしいのですが、実際には{{や}}も含めてそのまま画面に表示されてしまいます。  
そもそもこういった使い方が間違っているのかもしれませんが、もし良い方法がありましたらご教示ください。




思いつく方法としては、

1.`template`を利用して置き換える。  
2.`$compile`を利用して手動で反映させる。

でしょうか。

2.については、「AngularJSリファレンス」という本に記載されています。  
また下記の内容も参考になるかと思います。

[Does dynamically adding ng-bind directive not
work?](https://stackoverflow.com/questions/23430333/does-dynamically-adding-
ng-bind-directive-not-work)

1.

[code]

    app.module.directive("userDirective", function() {
        return {
            restrict : "E",
            template: "<div>名前：{{user.name}} ({{user.age}})</div>"
        };
    });
    
[/code]

2.

[code]

    app.module.directive("userDirective", function($compile) {
        return {
            restrict : "E",
            scope : {"user" : "="},
            link : function($scope, $element, $attrs){
                var elem = angular.element("<div>名前：{{user.name}} ({{user.age}})</div>");
                $element.append($compile(elem)($scope));
            }
        };
    });
    
[/code]




思いつく方法としては、

1.`template`を利用して置き換える。  
2.`$compile`を利用して手動で反映させる。

でしょうか。

2.については、「AngularJSリファレンス」という本に記載されています。  
また下記の内容も参考になるかと思います。

[Does dynamically adding ng-bind directive not
work?](https://stackoverflow.com/questions/23430333/does-dynamically-adding-
ng-bind-directive-not-work)

1.

[code]

    app.module.directive("userDirective", function() {
        return {
            restrict : "E",
            template: "<div>名前：{{user.name}} ({{user.age}})</div>"
        };
    });
    
[/code]

2.

[code]

    app.module.directive("userDirective", function($compile) {
        return {
            restrict : "E",
            scope : {"user" : "="},
            link : function($scope, $element, $attrs){
                var elem = angular.element("<div>名前：{{user.name}} ({{user.age}})</div>");
                $element.append($compile(elem)($scope));
            }
        };
    });
    
[/code]

