a login button directive in Angular.

login.html

<login redirect="/newpath">Bind to App Failed</login>

loginDirective.js

// depends on the authentication.js and login.js files
//authentication to give the key for OAuth login.js does other things like caching the data from Oauth, and other things if need be.
angular.module('app.loginDirective', []) 
	.directive('login', ['authentication','login','$http','$location', function(authentication, $http, $location) {
	var Template = '<div><button type="button" class="btn btn-warning" ng-click="login()">Login</button><p ng-show="uploadError" class="help-block">{{ uploadError }}</p></div>';
  return {
    restrict: 'E',
    scope: {
      redirect: '@',
      uploadError: '&'
    }, 
    template: Template,
    replace: true,

    link: function(scope, element, attr){
      scope.login = function(){
        // will log in 
        OAuth.initialize(authentication.getOAuthKey());
        OAuth.popup('google', function(error, result) {
          $http
            .get('api/login',{params:{token:result.access_token}})
            .success(function (data, status, headers, config) {
              login.login(data);
              // redirects to the path specified in the html
              $location.path(scope.redirect); 
              }
            })
            .error(function(error){
              scope.uploadError = "Unauthorized login, please try again";
            });
          });
      };
    }
  }

}]);