data not getting populated to the view from controller after routing in angular

Question

I am seeing no data in my view (Html) . where as i am getting data into controller from service as well.
Please let me know what i am missing .

Any suggestions what i am missing

Controller:

(function () {
    'use strict';

    angular.module('app') .controller('UserController', UserController);
    UserController.$inject = ['$scope', 'UserService', '$http', '$filter', '$rootScope','$location','$window'];
    function UserController($scope, UserService, $http, $filter, $rootScope,$location,$window) {


        $scope.editUser = function(userDetails){
            UserService.editUser(userDetails).then(editUserSuccess,editUserFailure);
            $location.path('edit');
        }


        var editUserFailure =function (error){
        };

        var editUserSuccess = function (response) {
             var userRow = response.data;
                $scope.edituserData=userRow;            
        };
    };  
})();

This is my service part

(function () {
    'use strict';

    angular.module('app').factory('UserService', UserService);

    UserService.$inject = ['$http', '$rootScope'];
    function UserService($http, $rootScope) {
        var service = {};
        service.editUser = editUser;
        return service;
        function editUser(editUserObj){
            console.log(editUserObj.userId);
            return $http({
              method: 'POST',
              url: 'editUser',
              data: btoa(editUserObj.userId),
              contentType: "application/json; charset=utf-8",
            });
        }
    }
})();

My routing from application

appname.config(function($routeProvider) {
    $routeProvider
      .when("/edit", {
        templateUrl:"my.html",
        controller : 'UserController'
    });

});


my.html:
--------

When i am trying to get data in my html template 

 <div class="row">
                    <div class="col-lg-6 col-sm-6 col-xs-6">
                      <p class="text-right"><strong>Middle Name :</strong></p>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-xs-6">
                      <p class="text-left-user"> {{editUserData.screenName}}</p>
                    </div>
                  </div>

Thanks in advance

Answer 1

Your service just needs to return the data on success. Right now it is only returning the Promise.

(function () {
    'use strict';

    angular.module('app').factory('UserService', UserService);

    UserService.$inject = ['$http', '$rootScope'];
    function UserService($http, $rootScope) {
        var service = {};
        service.editUser = editUser;
        return service;
        function editUser(editUserObj){
            console.log(editUserObj.userId);
            return $http({
              method: 'POST',
              url: 'editUser',
              data: btoa(editUserObj.userId),
              contentType: "application/json; charset=utf-8",
            }).success(function(response){
                return response;
            });
        }
    }
})();

Then in your .then success function in the controller, you should have the response available.