jQuery clone and append function isn't working as expected in AngularJS directive

Question

in my app I'm trying I'm building a shopping cart. You can see the app in this codepen: http://codepen.io/summerfreeze/pen/VjqJYW. It's almost working, but I'm struggling with the last part. I want the "ADD ORDER LINE" button to add another order lines under the existing one. I'm trying to do this using jQuery:

  myApp.directive('myDirective', function($scope) {
    $scope.addline = function() {
      $(".orderline").clone().appendTo('.main');
    };
    return addline();
  });

But this doesn't seem to work. I would be grateful if someone would look at the code and tell me what mistake did I make.

Answer 1

Not sure why you were using a directive. I removed that from your code and it works. You still have other errors, but I'm guessing you can attend to those. Here's the link to the modified version

new codepen version

   $scope.addline = function(){
    $(".orderline").clone().appendTo('.main');
  };

As the others suggested, in order to follow clean code standards, please refrain from using jQuery code in AngularJS, in time it will lead to problems.