<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
    {{userInfo}}
      <!-- edit form column -->
      <div class="col-md-9 personal-info">
        <h3>Personal info</h3>
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label class="col-md-3 control-label">Username:</label>
            <div class="col-md-8">
              <input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Organization:</label>
            <div class="col-lg-8">
              <input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Permission Group:</label>
            <div class="col-lg-8">
              <input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
            </div>
          </div>
          <div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
            <label class="col-lg-3 control-label">Root:</label>
            <div class="col-lg-8">
              <input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Email:</label>
            <div class="col-lg-8">
              <input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
            </div>
          </div>
          <hr>
          <h4>Change Password</h4>
          <br>
          <form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
              <div class="form-group">
                <label class="col-md-3 control-label">Change Password:</label>
                <div class="col-md-8">
                  <input type="password" name="newPassword" ng-model="password.new"
                   ng-minlength="6" required />
                    <span class="help-block"
                          ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
                      Please enter a new password, it must be at least 6 characters long.
                    </span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-3 control-label">Confirm password:</label>
                <div class="col-md-8">
                  <input type="password" name="newPasswordConfirm"
                   ng-model="password.confirm" ng-minlength="6"
                   value-matches="password.new" required />
                    <span class="help-block"
                          ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
                      Please enter the same password again to confirm.
                    </span>
                </div>
              </div>
        </form>
          <div class="form-group">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-8">
              <input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
              <div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
            </div>
          </div>
        </form>
      </div>
 </div>

app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
        $http.get('/api/users/userInfo/'+user.id).success(function (data) {
            console.log("user info ",data);
            $scope.userInfo = data;
        });

        //changePassword call to rest api

    }]);

(function() {
    var app = angular.module('userSettings', []);

    app.directive('valueMatches', ['$parse', function ($parse) {
    return {
      require: 'ngModel',
        link: function (scope, elm, attrs, ngModel) {
          var originalModel = $parse(attrs.valueMatches),
              secondModel = $parse(attrs.ngModel);
                // Watch for changes to this input
              scope.$watch(attrs.ngModel, function (newValue) {
                ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
              });
              // Watch for changes to the value-matches model's value
              scope.$watch(attrs.valueMatches, function (newValue) {
                ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
              });
        }
      };
    }]);
})();