title: Change div content dynamically on other div click (AngularJS)
body: <p>So, I'm new to AngularJS and I'm trying to change a div content after another is clicked (this one holds a div with the content that I want to put on the first one).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-controller="dCtrl"&gt;
      &lt;ul ng-repeat="product in products"&gt;
          &lt;li change&gt;
              {{product.name}}
              &lt;div class="hide"&gt;{{product.description}}&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>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"}
  ];
  
  })
  </code></pre>
  
  <p>I know that I could just say:</p>
  
  <pre><code>$("#test").html(message);
  </code></pre>
  
  <p>But I'm still confused about mixing jQuery and AngularJS, I dont know if that is a correct way of doing it</p>
  
  <p>Thanks</p>