AngularJS: How to access request variable into HTML

Question

First, I want my mode.addAttribute() object to be accessed into ng-repeat.

My requirement is, on landing page I want to show list of Departments and this object will be added in Spring MVC (i.e. ModelAndView.getAttribute).

I can be able to achieve it ${departmentsList} by iterating it like below:

<select>
  <c:forEach items="${departmentsList}" var="department">
    <option value="${department.name}"> ${department.name}
    </option>
  </c:forEach>
</select>

But I am looking for better approach something like this:

<select ng-model="department" ng-options="department.name for department in departmentsList"></select>

but somehow I am not able to access departmentsList into the ng-options.

How can I achieve this?

Answer 1

Spring MVC process the JSP file on server side and have access to ModelAndView object. Whereas, AngularJS runs on client side and doesn't have access to ModelAndView object.

You can do a workaround by assigning the ModelAndView data to a JavaScript variable and assign it to $scope in controller.

JSP file

<script>
var tempDepartmentsList = ${departmentsList}
</script>

AngularJS controller

app.controller("yourController", function($scope) {
  $scope.departmentsList = tempDepartmentsList;
});

Now you should be able to iterate the departmentsList using AngularJS ng-repeat.