<div class="modal1 mfp-hide" id="modal-get-started" >
    <div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
        <div style="padding: 50px;">
            <form  name="reg_form" id="get-started-form"  class="nobottommargin">

                <div class="row clearfix">
                    <div class="col-sm-12">
                        <h3 class="font-body">Register for Free Trial</h3>
                    </div>
                </div>


            <button  class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>

            <button  id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
           <br>
           <div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
                <span  style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
            </div>


        </form>
      </div>
    </div>
</div>

<div class="modal1 mfp-hide" id="modal-login" >
    <div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
        <div style="padding: 50px;">
            <h3 class="font-body">Login to your Account</h3>
            <form  class="nobottommargin">
                <div class="col_full">
                    <label class="font-body capitalize" for="login-form-modal-username">Username:</label>
                    <input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
                </div>

                <div class="col_full">
                    <label class="font-body capitalize" for="login-form-modal-password">Password:</label>
                    <input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
                </div>

                <div class="col_full nobottommargin">
                    <button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
                    <a href="#" class="fright">Forgot Password?</a>
                </div>
            </form>
            <div class="line line-sm"></div>
            <button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>

            <button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
            <!-- <a href="#" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</a> -->
        </div>
    </div>
</div>

$scope.closePopup = function(){
        $.magnificPopup.close();
        $.magnificPopup.open({
          items: {
            src: '#modal-login'
          }
        });
    }