Issue in JQuery Validation with AngularJS

Question

I use ruby on rails and Angular.

I follow - https://github.com/jpkleemans/angular-validate

I do following

APPLICATION.JS

//= require jquery
//= require app/jquery.validate.min.js
//= require angular
//= require app/angular-validate
//= require angular-resource
//= require ui-bootstrap
//= require ui-bootstrap-tpls
//= require app/assets
//= require app/services
//= require app/filters
//= require app/directives
// require app/showErrors.js
//= require app/controllers
//= require app/security
//= require app/app
//= require app/services/UserService.js
//= require app/services/FlashService.js
//= require app/cookie.js

APP.JS

var app;
app = angular.module('app', [
  'ui.bootstrap', 
  'security',
  'app.services', 
  'app.controllers', 
  'app.filters', 
  'app.directives',
  'ngCookies',
  'ngValidate'
  //'ui.bootstrap.showErrors'
]);
app.constant('config', 'http://localhost:3000/api/v1')


app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  $locationProvider.html5Mode(true);
  $routeProvider.

  when('/signup', {
    controller: 'LoginCtrl',
    templateUrl: ASSETS['signup']
  }).
  when('/login', {
    controller: 'LoginCtrl',
    templateUrl: ASSETS['login']
  }).
  when('/logout', {
    controller: 'LoginCtrl',    
  }).
  otherwise({
    redirectTo:'/'
  });
}]);

angular.module('app').run(['$rootScope', '$location', 'UserService', '$cookieStore', '$http', 'security', function($rootScope, $location, UserService, $cookieStore, $http, security) {

  $rootScope.globals = $cookieStore.get('globals') || {};

  if ($rootScope.globals.currentUser) {
    $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; 
  }

  $rootScope.$on('$locationChangeStart', function (event, next, current) {

    var restrictedPage = $.inArray($location.path(), ['/info', '/signup', '/login']) === -1;
    var loggedIn = $rootScope.globals.currentUser;

    if (restrictedPage && !loggedIn) {
      $location.path('/login');
    }
  });

}]);

app.config(function($httpProvider) {
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');

  var interceptor = ['$rootScope', '$q', function(scope, $q) {
    function success( response ) {
      return response
    };

    function error( response ) {
      if ( response.status == 401) {
        var deferred = $q.defer();
        scope.$broadcast('event:unauthorized');
        return deferred.promise;
      };
      return $q.reject( response );
    };
    return function( promise ) {
      return promise.then( success, error );
    };
  }];

  $httpProvider.responseInterceptors.push( interceptor );
});

LoginCtril

window.LoginCtrl = ['$scope', '$http', '$location', 'UserService', 'FlashService', 'config', 'security', function($scope, $http, $location, UserService, FlashService, config, security) {

  // Signup 
  $scope.signup = function(){    
      $scope.loginProcess = true;
        UserService.Signup($scope.user, function(response){
            if (response.success){
          UserService.SetCredentials(response.access_token);
                $location.path('/login')
            }else{
          $scope.authError = response.errors
          FlashService.Error(response.errors);
            }
        $scope.loginProcess = false;
        })
  };

  $scope.validationOptions = {
    rules: {
        firstname: {
            required: true,
        },
    },
    messages: {
        firstname: {
            required: "This field is required.",
        },
    }
  }


}];

and This is my Form.

<div data-ng-controller="LoginCtrl">
{{validationOptions}}

<div ng-class="{ 'alert': flash, 'alert-success': flash.type == 'success', 'alert-danger': flash.type == 'error' }" ng-if="flash" ng-bind="flash.message"></div>

<form name ='signupForm' data-ng-submit="signupForm.$valid && signup()" novalidate ng-validate="validationOptions">

<div class="form-group">
    <label>First Name</label>

    <input type="text" name="firstname" class="form-control" ng-model="user.firstname" required />

</div>

  <button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>

</form>

</div>

The Jquery validation is not display what wrong with above code please help me. Thank You.

Answer 1

UPDATE

I found a better way without JQuery.

I found this answer long back, but now I remembered to update here after a year. The forms will be available in $scope object. So just give a name to the form and use it.

**HTML**

<form id="userRegistration" name="registration" ng-submit="registerUser()" >

**Controller**

$scope.registerUser=function()
    {
       if ($scope.registration.$valid){
           alert("Submitting...");
       }
    }

**OLD Answer**

Thanks to Dipak for the comment.
I am adding the comment as answer here.

angular.module('myApp').controller('RegisterController', function($scope,$http) {
    page.setPage("Register","login-layout");
    $scope.user = {};
    $scope.registerUser=function()
    {
       if ($("#userRegistration").valid()){
           alert("Submitting...");
       }
    }
});