title: How I convert this jQuery function to AngularJS Directive?
body: <p>I have this <code>onclick="startTimer({{ $index }},{{ product.time }})"</code> but for obviously reason the databindings doesn't render, so I have to use <code>ng-click</code>for rendering the values but <code>ng-click</code>no working with my jQuery Script</p>
  
  <pre><code>&lt;script&gt;
      function startTimer(id, time) {
          $("#" + id).next("div").removeClass("claimActive");
          $("#" + id).next("div").addClass("claimWait");
          $("#" + id).removeClass("timerActive");
          $("#" + id).addClass("timerWait");
          $("#" + id).next("div").children("a").text("WAIT");
          if (time &lt;= 60) {
              if (time &lt; 10) $("#" + id).children("#m").text("0" + time);
              else $("#" + id).children("#m").text(time);
              $("#" + id).children("#s").text("30");
          } else {
              if (time &lt; 600) $("#" + id).children("#h").text("0" + time / 60);
              else $("#" + id).children("#h").text(time / 60);
              $("#" + id).children("#m").text("00");
              $("#" + id).children("#s").text("30");
          }
      }
  
      function checkTimers() {
          $(".timer").each(function() {
              seconds = parseInt($(this).children("#h").text()) * 3600 + parseInt($(this).children("#m").text()) * 60 + parseInt($(this).children("#s").text());
              if (seconds &gt; 0) {
                  hours = parseInt($(this).children("#h").text());
                  min = parseInt($(this).children("#m").text());
                  sec = parseInt($(this).children("#s").text());
                  if (sec &gt; 0) {
                      if (sec &gt; 10) $(this).children("#s").text(sec - 1);
                      else $(this).children("#s").text("0" + (sec - 1));
                  } else if (min &gt; 0) {
                      if (min &gt; 10) $(this).children("#m").text(min - 1);
                      else $(this).children("#m").text("0" + (min - 1));
                      $(this).children("#s").text(59);
                  } else if (hours &gt; 0) {
                      if (hours &gt; 10) $(this).children("#h").text(hours - 1);
                      else $(this).children("#h").text("0" + (hours - 1));
                      $(this).children("#m").text(59);
                      $(this).children("#s").text(59);
                  }
              } else {
                  $(this).next("div").removeClass("claimWait");
                  $(this).next("div").addClass("claimActive");
                  $(this).addClass("timerActive");
                  $(this).removeClass("timerWait");
                  $(this).next("div").children("a").text("CLAIM");
              }
          });
      }
      $(document).ready(function() {
          setInterval(checkTimers, 1000);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So I Need this in AngularJS Directives, but I Don't have any idea how to do that all that I already add to my Controller is something like </p>
  
  <p><code>$scope.startTimer = function($index,productTime) {};</code></p>