angularJs点击一次响应多次

Question

app.directive("loadTxmethods", [
  "$location",
  function($location) {
    return {
      restrict: "A",
      template: `<div class="txMethodsMask" ng-click="hideTxmethods()"></div>
        <div class="txmContainer">
          <header>请选择提款方式</header>
          <div class="txFrom">
            <div class="txitem" ng-repeat="clist in data.cardList">
              <label ng-click="getTxid(clist.id)" ng-if="clist.cardType==1"><span>{{clist.AccountName}}</span><span class="txmargin">{{clist.cardNumber}}</span><input type="radio" name="selectInfo" value="{{clist.id}}"/><span class="txright">银行卡</span></label> 
              <label ng-click="getTxid(clist.id)" ng-if="clist.cardType==2"><span>{{clist.cardNumber}}</span><input type="radio" name="selectInfo" value="{{clist.id}}"/><span class="txright">支付宝</span></label> 
            </div>
            <input class="txinput" id="txMoney" type="text" placeholder="请输入提现金额" value=""/><span class="txyuan">元</span>
            <input class="txinput" id="txSafecode" type="password" placeholder="请输入安全码" value=""/>
          </div>
          <section>
            <p>温馨提示：银行卡单次最高限额100000元</p>
            <p><span>温馨提示：</span>支付宝单次最高限额50000元</p>
          </section> 
          <footer class="txSubmit">提交</footer>
        </div>
      `,
      link: function(scope, element, attrs, ngModel) {
        scope.getTxid = function(id){
          scope.txid = id;
        }
        scope.showTxmethods= function(){
          scope.connection.send(JSON.stringify({type:'bindCardList'}));
          $('.loadTxmethods').show();

          var txSubmit = document.querySelectorAll("footer.txSubmit");

          angular.element(txSubmit).on("click", function(event) {
            console.log(scope.txid)
          });
        }
        scope.hideTxmethods = function(){
          $('.loadTxmethods').hide();
          scope.txid = "";
        }

      }
    };
  }
]);

为什么点击提交按钮会响应多次，如何解决呢？