javascript - 他の div クリックで div コンテンツを動的に変更する (AngularJS)

Question

だから、私はAngularJSが初めてで、別のものがクリックされた後にdivコンテンツを変更しようとしています(これは、最初のものに入れたいコンテンツを含むdivを保持しています)。

HTML

<div ng-controller="dCtrl">
    <ul ng-repeat="product in products">
        <li change>
            {{product.name}}
            <div class="hide">{{product.description}}</div>
        </li>
    </ul>
</div>

<div id="test"></div>

Javascript

var app = angular.module("dt", []);

app.directive("change", function() {

    return function(scope, element) {

        element.bind("click", function() {
           var message = element.children("div").text();
           console.log("breakpoint");

           angular.bind("#test", function() {
               this.text(message);
           });
        })
    }
})

app.controller("dCtrl", function($scope) {

$scope.products = [
    { "name" : "Escova XPTO", "description": "Lava tudo num instante"},
    { "name" : "Pasta de Dentes YMZ", "description": "Dentifrico do camandro"}
];

})

私はただ言うことができることを知っています：

$("#test").html(message);

しかし、jQuery と AngularJS の混合についてはまだ混乱しています。それが正しい方法かどうかはわかりません。

ありがとう