javascript - $watch for ng-model changes -

i have following markup

<li ng-repeat="ticket in tickets">  <span>{{ticket.name}} - {{ticket.price}}</span>&nbsp;  <input type="number"    value="1"    ng-disabled="!ticket.selected"    size="2"    style="width:34px;"    ng-change="ticket.quantity"   ng-model="ticket.quantity"/>  <input type="checkbox"    name="choose"    ng-click="addtocart($event)"    ng-model="ticket.selected"    ng-if-false="false"    ng-if-true="true"    value="{{ticket.id}}"/> </li> 

then have on addcart()

$scope.addtocart() = function(){   var template = '<fieldset id="ticket-'+this.ticket.id+'">' +      '<input type="hidden" name="item_name_'+$scope.counter+'" value="'+this.ticket.name+'">' +      '<input type="hidden" name="amount_'+$scope.counter+'" value="'+this.ticket.price+'">' +      '<input type="hidden" name="on0_'+$scope.counter+'" value="quantity">' +      '<input type="hidden" name="os0_'+$scope.counter+'" value="'+this.ticket.quantity+'"></fieldset>',      $el = angular.element('#payform').append(template).find('input[name=os0_' + $scope.counter +']');      $scope.$watch(this.ticket.quantity,function(){         console.log(this, 'this', arguments);         console.log('ticket',ticket);         console.log($el.attr('name'));      })      return false; } 

i'm trying dynamically watch changes in passed model update dynamically created form elements.

how can achieve , how heavy keep adding , removing event if element no longer exists?

you heading in hardest direction. should add template @ view using ng-repeat, not creating elements inside controller, whats represent worst pratice ever. should add tickets inside array, addedtickets exemple , let angularjs hardest job: render dinamically!

for exemple:

view

<input type="checkbox"   name="choose"   ng-click="addtocart(ticket, $index)"   ng-if-false="false"   ng-if-true="true"   ng-model="ticket.selected" />  <fieldset id="ticket-{{t.id}}" ng-repeat="t in addedtickets">  <input type="hidden" name="item_name_{{$index}}" ng-model="t.name">  <input type="hidden" name="amount_{{$index}}" ng-model="t.price">  <input type="hidden" name="on0_{{$index}}" ng-model="t.quantity"> </fieldset> 

controller

$scope.addtocart(ticket, index) {  if(ticket.selected)     $scope.addedtickets.push({name: ticket.name, quantit: ticket.quantity, /*etc*/});  else    //delete }