title: change password in modal popup angularJS
body: <p>I am quite new in programming with c# and also in using AngularJS.
  I have a button in a MyProfil form that opens a popup to change the password.</p>
  
  <p>This is the button in MyProfile.html</p>
  
  <p><code>&lt;a href class="btn btn-info btn-lg" data-ng-click="changePasswordDialog()"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; {{'ChangePassword' | translate}}&lt;/a&gt;</code></p>
  
  <p>In the popup I have two inputs "newPassword" and "confirmPassword"
  and two button one to save and one to cancel.
  Here is the popup html code inside MyProfile.html</p>
  
  <p></p>
  
  <p>`</p>
  
  <pre><code>    &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" ng-click="ok()"
                  data-dismiss="modal" aria-hidden="true"&gt;
              &amp;times;
          &lt;/button&gt;
          &lt;h2 class="form-login-heading"&gt;{{'ChangePassword' | translate}}&lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
  
          &lt;input type="Password" class="form-control" placeholder="{{'Password' | translate}}" data-ng-model="userData.newPassword" required autofocus&gt;
          &lt;input type="password" class="form-control" placeholder="{{'ConfirmPasssword' | translate}}" data-ng-model="userData.confirmPassword" required&gt;          
      &lt;/div&gt;
    &lt;div class="wrapper"&gt;
      &lt;a href="" class="btn btn-info btn-lg" data-ng-click="changePassword()" type="submit"&gt;&lt;span class="glyphicon glyphicon-save"&gt;&lt;/span&gt; {{'Save'|translate}}&lt;/a&gt;
      &lt;a href="" class="btn btn-primary btn-lg" data-ng-click="cancelChangePassword()"&gt;&lt;span class="glyphicon glyphicon-remove-sign"&gt;&lt;/span&gt; {{'Cancel' | translate}}&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>in the myProfileController.js I have </p>
  
  <pre><code>         $scope.changePasswordDialog = function () {
      $scope.userData = {
          newPassword: "",
          confirmPassword: ""
      };
      var modalInstance = $modal.open({
          templateUrl: 'modal.html',
          controller: 'ModalInstanceCtrlChangePassword',
          resolve: {
              userData: function () {
                  return $scope.userData;
              }
          }
      });
  
      modalInstance.result.then(function (userData) {// I need to do somethig here // get the values of the inputs and send it to server sometinglike that
        $scope.selectedItem = userData;
      }, function () {
          $log.info('Modal dismissed at: ' + new Date());
      });
  </code></pre>
  
  <p>Here is the ModalInstanceCtrlChangePassword.js
  when I have it like this at least I can see the popup 
      'use strict';
  app.controller('ModalInstanceCtrlChangePassword', function ($scope, $modalInstance,userData) {</p>
  
  <pre><code>$scope.userData = userData;
  $scope.selectedItem = {
      item: $scope.userData[0]
  };
  
  $scope.changePassword = function () {
      $modalInstance.dismiss('cancel');
  };
  
  $scope.cancelChangePassword = function () {
      $modalInstance.dismiss('cancel');
  
  };
  
    });
  </code></pre>
  
  <p>But when I change the code inside the $scope.changePassword and I call a service then nothing is working  even the popup is not showing.
  Here is it after I've added called the service:</p>
  
  <pre><code>'use strict';
  app.controller('ModalInstanceCtrlChangePassword', ['$scope', '$location', 'modalService', '$cookies', function ($scope, $location, modalService, $cookies,$modalInstance ,userData) {
  
      $scope.userData = {
          emailwork:"",
          newPassword: "",
          confirmpassword: "",
      };
  
      $scope.userData = userData;
      $scope.selectedItem = {
      item: $scope.userData[0]
  };
  
  $scope.changePassword = function () {
      //$modalInstance.dismiss('cancel');
      modalService.changePassword($scope.userData).then(function (response) {
          $location.path('/home');
      },
          function (err) {
              alert("message " + err.error_description.message);
              $scope.message = err.error_description;
          });
  };
  
  $scope.cancelChangePassword = function () {
      $modalInstance.dismiss('cancel');
  
  };
  
    }]);
  </code></pre>
  
  <p>Here is the modalService.js</p>
  
  <pre><code>'user strict';
  </code></pre>
  
  <p>app.factory('modalService', ['$http', '$q', 'ngAuthSettings', '$cookies', function($http, $q, ngAuthSettings, $cookies) {</p>
  
  <pre><code>var serviceBase = ngAuthSettings.apiServiceBaseUri;
  
  var modalServiceFactory = {};
  
  var _userInfo = {
      companyId: "",
      userName: "",
      userTableId: "",
      langId: "",
      emailWork: "",
  };
  
  if ($cookies.userName &amp;&amp; $cookies.userTableId &amp;&amp; $cookies.companyId &amp;&amp; $cookies.language) {
  
      _userInfo.userTableId = $cookies.userTableId;
      _userInfo.companyId = $cookies.companyId;
      _userInfo.userName = $cookies.userName;
      _userInfo.langId = $cookies.language;
      _userInfo.emailWork = $cookies.emailWork;
  }
  var _changePassword = function (userData) {
  
      var data = {
          // OldPassword: userData.oldPassword,
          emailWork: _userInfo.emailWork,
          NewPassword: userData.newPassword,
          ConfirmPassword: userData.confirmPassword
      };
  
      var deferred = $q.defer();
  
      $http.post(serviceBase + 'api/Account/ChangePassword', data).success(function (response) {
          //authService.logOut();
          deferred.resolve(response);
      }).error(function (err, status) {
          //authService.logOut();
          deferred.reject(err);
          alert(err.data.message);
          // authService.logOut();
  
      });
      return deferred.promise;
  }
     modalServiceFactory.changePassword = _changePassword;
  return modalServiceFactory;
  }]);
  </code></pre>
  
  <p>Here is the code of ChangePassword in AccountController</p>
  
  <pre><code>  // POST api/Account/ChangePassword
      [System.Web.Http.Route("ChangePassword")]
      public async Task&lt;IHttpActionResult&gt; ChangePassword(Cabin.Web.Models.ChangePasswordBindingModel model)
      {
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState);
          }
  
          var user = await UserManager.FindByEmailAsync(model.emailWork);
          if (user == null) return BadRequest();
          UserManager.RemovePassword(user.Id);
          var result= UserManager.AddPassword(user.Id, model.NewPassword);
          return !result.Succeeded ? GetErrorResult(result) : Ok();
  
  
          //IdentityResult result = await UserManager.ChangePasswordAsync(User.Identity.GetUserId(), model.OldPassword,
          //    model.NewPassword);
      }
  </code></pre>
  
  <p>I will appreciate any kind of guidance or solution.
  Thank you</p>