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('/info', {
    controller: 'InfoCtrl',
    templateUrl: ASSETS['info']
  }).
  when('/info2', {
    controller: 'InfoCtrl',
    templateUrl: ASSETS['info']
  }).
  when('/sites', {
    controller: 'SiteIndexCtrl',
    templateUrl: ASSETS['sites_index']
  }).
  when('/sites/new', {
    controller: 'SiteCreateCtrl',
    templateUrl: ASSETS['sites_form']
  }).
  when('/sites/edit/:editId', {
    controller: 'SiteEditCtrl',
    templateUrl: ASSETS['sites_form']
  }).
  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 );
});

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//


//= 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

login_ctrl.js

window.LoginCtrl = ['$scope', '$http', '$location', 'UserService', 'FlashService', 'config', 'security', function($scope, $http, $location, UserService, FlashService, config, security) {
  
  // Login
  $scope.user = {}
  $scope.initController = function(){
      UserService.ClearCredentials();
  };
  $scope.initController();
  $scope.loginProcess = false;


  $scope.login = function() {
		UserService.Login($scope.user.email, $scope.user.password, function (response) {
			if (response.success) {
      	UserService.SetCredentials(response.access_token);
      	$location.path('/info');
			}else{
				alert(response.error)
			}
		})
  };

  // Logout
  $scope.logout = function(){  	
  	UserService.Logout($scope.globals.currentUser.access_token, function(response){
  		if(response.success){
  			$location.path('/login')
  		}else{
  			$location.path('/')
  		}  		
  	})
  };

  // Signup 
  $scope.signup = function(){    
    if ($scope.registration.$valid){
      $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;
    	})
    }
  };

  // Clear Form
  $scope.clearForm = function(){
  	$scope.user = {};
  };

  $scope.validationOptions = {
    rules: {
        firstname: {
            required: true,
        },
    },
    messages: {
        firstname: {
            required: "We need your email address to contact you",
        },
    }
  }


}];

signup.html

<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" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }"> -->
<div class="form-group">
    <label>First Name</label>

    <input type="text" name="firstname" class="form-control" ng-model="user.firstname" required />
    
<!-- 
     <span ng-show="(signupForm.firstname.$dirty || submitted) && signupForm.firstname.$error.required">
      First Name is required.
    </span>
 -->    
</div>

<div class="form-group" show-errors>
  <label>Last Name</label>
  <input name="lastname" type='text' ng-model='user.lastname' class='form-control' ng-required> </input>
</div>

  <label>E-mail</label>
  <input name="email" type="email" ng-model='user.email' required>
  
  <label>Password</label>
  <input name="password" type="password" ng-model="user.password" required>
  
  <label>Password Confirmation</label>
  <input name="password_confirmation" type="password" ng-model="user.password_confirmation" required>

  <div class="clearfix"></div>
  <hr>


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

  <button class="btn clear" ng-click="clearForm()">Clear</button>
  <button class="btn btn-warning cancel" ng-click="cancelLogin()">Cancel</button>
  
</form>

</div>