title: AngularJS Directives ng-click
body: <p>I must make a website. When you press an <code>IMG</code> it adds the template from the directive to another div.</p>
  
  <p>In detail, I have 3 imgs on my website. Hamburger, Cola and Crips. When you press one of them it adds it to the Order List.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html ng-app="myApp"&gt;
      &lt;head&gt;
          &lt;script src="scripts/angular.min.js"&gt;&lt;/script&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
          &lt;link rel="Stylesheet" type="text/css" href="styles/style.css"&gt;
          &lt;title&gt;Food Center&lt;/title&gt;
          &lt;script src="scripts/skrypt.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 class="ladne"&gt;&lt;center&gt;Food Center&lt;/center&gt;&lt;/h1&gt;
          &lt;div class="d1"  ng-controller="myCtrl" myDir1&gt;
              &lt;img src="styles/img/cola.gif"&gt;&lt;/img&gt;
              &lt;img src="styles/img/fryt.gif"&gt;&lt;/img&gt;
              &lt;img src="styles/img/ham.gif"&gt;&lt;/img&gt;
              &lt;br&gt;
              &lt;div class="zam" &gt;
                  Date of order: {{data | date:'yyyy-MM-dd'}}
                  &lt;br&gt;
                  Your Order:
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Controller code:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  myApp.controller('myCtrl', function($scope) {
      $scope.data = new Date();
      $scope.hamburger ={
          name: 'Hambureger',
      }
      $scope.frytki = {
          name: 'Frytki',
      }
      $scope.cola = {
          name: 'Coca-Cola',
      }
  });
  
  myApp.directive('dir1', function () {
      return {
          restrict: 'A',
          template: '&lt;br&gt;{{hamburger.nazwa}}'
      };
  });
  </code></pre>
  
  <p>I really don't understand these directives. Would be nice if you can help me.</p>