How to resolve conflict between angularJS and zurb foundation framework?

Question

Angular

function ctrl($scope, $http, $location) {
  $scope.DOM = {
    el: $('#signUp')
  };

  $scope.response = function(){
    alert(123);
  }

  $scope.add = function(){
    $scope.DOM.el.on('valid', $scope.response());
  }
}

When checking the validity of the form using zurb foundation, the $scope.add function is called, regardless of the correctness of the input. I call with ng-submit.

<form action="" method="" data-abide="ajax" ng-controller="ctrl" ng-submit="add()">
  <div class="name-field">
    <label>
      <input type="text" name="name" placeholder="Имя" required ng-model="user.name" />
    </label>
    <small class="error">Необходимо ввести имя</small>
  </div>
  <button type="submit">Нажать</button>
</form>

How to solve the problem correctly?

Answer 1

jQuery in controller? Already at this point, all the concepts of angularjs are violated.
Validation should only happen through ngModel (directives using ngModelCtrl).
In general , there is integration . Foundation with angular