как получить данные, используя пружинный MVC и угловой JS

Question

код контроллера

@RequestMapping(value="/welcomes", method = RequestMethod.GET, produces="MediaType.application/json")
    public @ResponseBody ModelAndView welcome(@ModelAttribute UserBean userBean)
    {
        List<UserBean> usernames=new ArrayList<UserBean>();
        usernames = retrievedataservice.findAllUsers(userBean);
        System.out.println(usernames.size());
        return new ModelAndView("welcomes", "usernames", usernames);
    }

угловой код js

  <script>
    var app = angular.module('myApp', []);
    app.controller('UserController', ['$scope', '$http', function($scope, $http){
        $scope.reload = function () {
            $http({
                method : 'GET',
                url : 'welcomes'
            }).then(function successCallback(response){
                 $scope.usernames=response.data.usernames;
                 console.log("Success");
                 console.log($scope.usernames);
             },function errorCallback(response) {
                 $scope.err_state = true;
                 console.log(response.statusText);
             });
        };
             $scope.reload();

    }]);
    </script>
<div data-ng-app="myApp" data-ng-controller="UserController">
   <table border="1" width="50%" height="50%"> 
    <tr><th>user name</th><th>phone</th><th>email</th></tr>
     <tr data-ng-repeat="user in usernames">
     <td>{{user.username}}</td>
      <td>{{user.phone}}</td>
       <td>{{user.email}}</td>
       </tr>   
   </table>   

Фактически контроллер возвращает список данных, но угловой js не может получить данные.console.log ($ scope.usernames);вернуть нулевые значения.он не может интегрироваться с угловым JS и контроллером.