[![enter image description here](https://i.stack.imgur.com/Iovci.png)](https://i.stack.imgur.com/Iovci.png)

this is my project structure, Failed to load resource: the server responded with a status of 404 (), ShowDetail.jsp is not found, which path i need to give in Route templateURL ?

[![enter image description here](https://i.stack.imgur.com/HKeeG.png)](https://i.stack.imgur.com/Iovci.png)

When click on name i need to populate details on another page,

i am using Server side(Spring MVC) Service to fetch details.

My client side code is in below snippet 

```js
var App = angular.module("myApp", ['ngRoute', 'angularUtils.directives.dirPagination']);
App.config(['$routeProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider.
    when('/detail/:username', {
      templateUrl: 'showDetail.jsp',
      controller: 'detailController'
    });
  }
]);
angular.module('myApp').controller("myController", function($scope, $http) {
  function getDetails(name) {

    $http.get(REST_SERVICE_URI + '/detail/' + name)
      .then(
        function(response) {

          self.detail = response.data;

        },
        function(errResponse) {
          console.error('Error while fetching Users');

        }
      );

  }
});
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div ng-controller="myController as ctrl">
  <tbody>
    <tr dir-paginate="u in ctrl.users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
      <td><span ng-bind="u.id"></span>
      </td>
      <td>
      <a>
         <span ng-bind="u.name"  ng-click="ctrl.getDetails(u.name)"></span>
      </a>
      </td>
      <td><span ng-bind="u.department"></span>
      </td>
      <td>
      <span ng-bind="u.job"></span>
      </td>
    </tr>
  </tbody>
</div>
```

IndexController.java

```
@RequestMapping(value= "/detail/{name}",method = RequestMethod.GET)
 public String getDetails(@PathVariable("name") String name) {
   return "showDetail";
 }

```

MainController.java

```
@RequestMapping(value = "/detail/{name}", method = RequestMethod.GET,   produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<Detail> getDetails(@PathVariable("name") String name) {
    System.out.println("Fetching detail with name " + name);
    Detail detail = userService.findByName(name);
    if (detail == null) {
        System.out.println("Detail with id " + name + " not found");
        return new ResponseEntity<Detail>(HttpStatus.NOT_FOUND);
    }
    return new ResponseEntity<Detail>(detail, HttpStatus.OK);
}

```

ServiceImpl.java

```
public Detail findByName(String name) {
    for(Detail deatil : details){
        if(deatil.getFirstname().equalsIgnoreCase(name)){
            return deatil;
        }
    }
    return null;
}

```

These are my files, i am able to fetch details and getting in angularJS controller, when i click on a name field in table it should display corresponding details in another page, i can fetch the corresponding details, but page is not changing, i am having problem With routing in angular Js and SpringMVC, Please help me how to resolve this issue
['https://Stackoverflow.com/questions/42574844', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3639244/']
You can create a Map and map the integer to the String Value.

Iterate the reference array and get it listed based on your order.

Snippet:

```
Map<Integer,String> maps = new HashMap<Integer,String>();
maps.put(1,"Red");
maps.put(2,"White");

for(Integer a : values){
   System.out.println(maps.get(a));
}

```
You can use 

```
Collections.swap(test,1,2);
Collections.swap(test,2,3);

```

Documentation [Here](http://docs.oracle.com/javase/7/docs/api/java/util/Collections.html#swap%28java.util.List,%20int,%20int%29)