title: AngularJS User Register page created but Login page cannot connect well
body: <p>I used a plunket: <a href="http://embed.plnkr.co/tg25kr/" rel="nofollow noreferrer">http://embed.plnkr.co/tg25kr/</a> so as to create my register page, for my project I use AngularJS, Asp.Net and C#, bootstrap, JavaScript.</p>
  
  <p>I created the Register page and works very good but I do not know how to create the connection in the app.js from the plunket and the DB to work properly with Login and also to redirect to the user page as it is in the plunket that I provided.</p>
  
  <pre><code>enter code here
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@section style {
      &lt;link rel="stylesheet" href="~/Content/accds/areas/registration/index.css" /&gt;
  }
  @section scripts {
      &lt;script type="text/javascript" src="~/Scripts/accds/areas/registration/app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/Scripts/accds/areas/registration/controller.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/Scripts/accds/areas/registration/service.js"&gt;&lt;/script&gt;
  }
  
  
  
  
  
  @*THis is the code for caps lock on/off message Password*@
  &lt;script language="Javascript"&gt;
      function capLock(e) {
          kc = e.keyCode ? e.keyCode : e.which;
          sk = e.shiftKey ? e.shiftKey : ((kc == 16) ? true : false);
          if (((kc &gt;= 65 &amp;&amp; kc &lt;= 90) &amp;&amp; !sk) || ((kc &gt;= 97 &amp;&amp; kc &lt;= 122) &amp;&amp; sk))
              document.getElementById('divMayus').style.visibility = 'visible';
          else
              document.getElementById('divMayus').style.visibility = 'hidden';
      }
  &lt;/script&gt;
  @*THis is the code for caps lock on/off message Confirm Password*@
  &lt;script language="Javascript"&gt;
      function capLock(e) {
          kc = e.keyCode ? e.keyCode : e.which;
          sk = e.shiftKey ? e.shiftKey : ((kc == 16) ? true : false);
          if (((kc &gt;= 65 &amp;&amp; kc &lt;= 90) &amp;&amp; !sk) || ((kc &gt;= 97 &amp;&amp; kc &lt;= 122) &amp;&amp; sk))
              document.getElementById('divMayu').style.visibility = 'visible';
          else
              document.getElementById('divMayu').style.visibility = 'hidden';
      }
  &lt;/script&gt;
  
  @*This is the code of popover message for instructions in the inputs*@
  &lt;script&gt;
      $(document).ready(function () {
          $('[data-toggle="popover"]').popover();
      });
    
  
  &lt;/script&gt;
  
  
  @*NEW CODE EMAIL VALIDATION*@
  &lt;script&gt;
      directive('uniqueUsername', function ($http) {
          return {
              restrict: 'A',
              require: 'ngModel,^form',
              link: function (scope, element, attrs, ngModel) {
                  element.bind('blur', function (e) {
                      ngModel.$loading = true;
  
                      $http.get("/Authorisation/Registration/checkUnique/" + element.val()).success(function (data) {
                          ngModel.$loading = false;
                          ngModel.$setValidity('unique', !data);
                      });
                  });
              }
          };
      })
  &lt;/script&gt;
  
  
  
  
  @*Code from CRUD HTML *@
  
  
      &lt;div ui-view&gt;
      &lt;/div&gt;
  
     &lt;script id="templates/add-edit-view.html" type="text/ng-template"&gt;
      
         &lt;div class="row justify-content-md-center"&gt;
  
  
             &lt;div class="col-md-4 col-md-offset-2"&gt;
  
                 @* FULLNAME CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
                 &lt;h2&gt;Register&lt;/h2&gt;
                 &lt;form name="form"  ng-submit="vm.register()" role="form"&gt;
                     &lt;div class="form-group" ng-class="{ 'has-error': form.firstName.$dirty &amp;&amp; form.firstName.$error.required }"&gt;
                         &lt;label for="username"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Fullname name&lt;/label&gt;
                         &lt;input type="text" name="firstName" id="firstName" autofocus class="form-control" ng-model="mAddEditView.User.Fullname" ng-pattern="/^([a-zA-Z]+[,.]?[ ]?|[a-zA-Z]+['-]?)+$/" required /&gt;
                         &lt;span ng-show="form.firstName.$dirty &amp;&amp; form.firstName.$error.required" class="help-block"&gt;Fullname is required, use only words!&lt;/span&gt;
  
                     &lt;/div&gt;
  
                     @* USERNAME CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group" ng-class="{ 'has-error': form.username.$dirty &amp;&amp; form.username.$error.required }"&gt;
                         &lt;label for="username"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Username&lt;/label&gt;
                         &lt;input data-toggle="popover" data-trigger="focus" data-content="User name should start with alphabet. Username can contain letters, numbers, underscore_" type="text" name="username" id="username" class="form-control" ng-model="mAddEditView.User.Username" ng-pattern="/^[A-Za-z][A-Za-z0-9_]*(?:_[A-Za-z0-9_]+)*$/" required  username-available ng-model-options="{ updateOn: 'blur'}" /&gt;
        
          
                         &lt;span ng-show="form.username.$dirty &amp;&amp; form.username.$error.required" class="help-block"&gt;Username is required&lt;/span&gt;
                     &lt;/div&gt;
  
                     @* PASSWORD CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group" ng-class="{ 'has-error': form.password.$dirty &amp;&amp; form.password.$error.required }"&gt;
  
                         &lt;label for="password"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Password&lt;/label&gt;
                         &lt;input data-toggle="popover" data-trigger="focus" data-content="Minimum 8 characters long and should contain at least one (small- and capital letter, number and special character)." type="password" name="password" id="password" onkeypress="capLock(event)" class="form-control" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@@#\$%\^&amp;\*])(?=.{8,})/" required /&gt;
  
                         &lt;div id="divMayus" style="visibility:hidden"&gt;Caps Lock is on.&lt;/div&gt;
                         &lt;span ng-show="form.password.$dirty &amp;&amp; form.password.$error.required" class="help-block"&gt;Password is required&lt;/span&gt;
                     &lt;/div&gt;
  
  
                     @* PASSWORD 2 CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
                     &lt;div class="fieldWrapper"&gt;
                         &lt;div class="form-group" ng-class="{ 'has-error': form.password1.$dirty &amp;&amp; form.password1.$error.required }"&gt;
  
                             &lt;label for="password1"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Confirm Password&lt;/label&gt;
                             &lt;input data-toggle="popover" data-trigger="focus" data-content="The password should match." type="password" name="password1" id="password1" onkeypress="capLock(event)" class="form-control" ng-match="mAddEditView.User.Password" ng-model="mAddEditView.User.Password1" required /&gt;
                             &lt;div id="divMayu" style="visibility:hidden"&gt;Caps Lock is on.&lt;/div&gt;
  
                             &lt;span ng-show="form.password1.$dirty &amp;&amp; form.password1.$error.required" class="help-block"&gt;Password is required&lt;/span&gt;
                             &lt;span ng-show="mAddEditView.User.Password !== mAddEditView.User.Password1" class="help-block"&gt;&lt;font style="color:red;"&gt;Password is not valid!&lt;/font&gt;&lt;/span&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                     @* ORGANIZATION CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group" ng-class="{ 'has-error': form.organization.$dirty &amp;&amp; form.organization.$error.required }"&gt;
                         &lt;label for="username"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Organization&lt;/label&gt;
                         &lt;input type="text" name="organization" id="Text1" class="form-control" ng-model="mAddEditView.User.Organization" required /&gt;
                         &lt;span ng-show="form.organization.$dirty &amp;&amp; form.organization.$error.required" class="help-block"&gt;Organization is required&lt;/span&gt;
                     &lt;/div&gt;
  
                     @* OCCUPATION CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group" ng-class="{ 'has-error': form.occupation.$dirty &amp;&amp; form.occupation.$error.required }"&gt;
                         &lt;label for="username"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Occupation&lt;/label&gt;
                         &lt;input type="text" name="occupation" id="Text1" class="form-control" ng-model="mAddEditView.User.Occupation" required /&gt;
  
                         &lt;span ng-show="form.occupation.$dirty &amp;&amp; form.occupation.$error.required" class="help-block"&gt;Occupation is required&lt;/span&gt;
                     &lt;/div&gt;
  
                     @* GENDER CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group" ng-class="{ 'has-error': form.gender.$dirty &amp;&amp; form.gender.$error.required }"&gt;
                         &lt;label for="username"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Gender&lt;/label&gt;
                         &lt;select class="form-control" name="gender" id="Text1" ng-model="mAddEditView.User.Gender" required&gt;
                             &lt;option&gt;&lt;/option&gt;
                             &lt;option&gt;Male&lt;/option&gt;
                             &lt;option&gt;Female&lt;/option&gt;
                         &lt;/select&gt;
                         &lt;span ng-show="form.gender.$dirty &amp;&amp; form.gender.$error.required" class="help-block"&gt;Gender is required&lt;/span&gt;
                     &lt;/div&gt;
  
                     @* CHECKBOX 1 - SCHOOL Profile CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
                     &lt;p class="form-group"&gt;Choose permissions: &lt;/p&gt;
                     &lt;div class="form-group"&gt;
                         &lt;label for="username"&gt;&lt;input type="checkbox" class="identity" style="zoom:1.1" name="Schoolpro" id="Schoolpro" ng-model="mAddEditView.User.Schoolpro" /&gt;School Profile: &lt;/label&gt;
                     &lt;/div&gt;
  
  
                     @* CHECKBOX 2 - Wider Achievement CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group"&gt;
                         &lt;label for="username"&gt;
                             &lt;input type="checkbox" style="zoom:1.1" name="Widerach" id="Widerach" ng-model="mAddEditView.User.Widerach" /&gt;
                             Wider Achievement:
                         &lt;/label&gt;
  
                     &lt;/div&gt;
  
                     @* CHECKBOX 3 - Data Hub Data CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
                     &lt;div class="form-group"&gt;
                         &lt;label for="username"&gt;
                             &lt;input type="checkbox" style="zoom:1.1" name="Datahub" id="Datahub" ng-model="mAddEditView.User.Datahub" /&gt;DataHub data:
                         &lt;/label&gt;
                     &lt;/div&gt;
  
  
  
                     @* EMAIL CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
  
                     &lt;div class="form-group" ng-class="{ 'has-error': form.email.$dirty &amp;&amp; form.email.$error.required }"&gt;
                         &lt;label for="email"&gt;&lt;font style="color:red;"&gt;*&lt;/font&gt;Email :&lt;/label&gt;
                         &lt;input data-toggle="popover" data-trigger="focus" data-content="In order to register type a correct email!" type="email" name="email" class="form-control" ng-model="mAddEditView.User.Email"  ng-pattern="/[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*@@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/" required /&gt;
                         &lt;span ng-show="form.email.$dirty &amp;&amp; form.email.$error.required" class="help-block"&gt;Email is required&lt;/span&gt;
                       
                     &lt;/div&gt;
                     
                     @*------------------SAMPLE-------------------------*@
  
  
             @*  www.embed.plnkr.co/tg25kr/      ---- from here take the code for LOGIN*@
  
  
  
  
             @* SAVE AND CANCEL BUTTON CODE Below--------------&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; *@
  
             &lt;div class="form-actions"&gt;
                 &lt;button type="button" ng-click="doSave(mAddEditView.User)" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary" ng-click="regform.$invalid ? alert(" ng-messages="regform.Fullname.$error" ) doSave(mAddEditView.User)&gt;Register&lt;/button&gt;
                 &lt;img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /&gt;
  
                 &lt;button ng-click="redirect()"&gt;Cancel&lt;/button&gt;
             &lt;/div&gt;
  
             &lt;pre style="position: absolute; left: 500px;border: 3px solid #73AD21;"&gt; {{ mAddEditView.User | json }} &lt;/pre&gt;
             &lt;/form&gt;
         &lt;/div&gt;
      &lt;/div&gt;
        
  &lt;/script&gt;
  
        </code></pre>
  </div>
  </div>
  </p>