html select multiple, how to preselect with anugularjs while using jstl

There is a problem when you mix angularjs with JSTL. JSTL provides you complete HTML from the server side once whereas angularjs is good with ajax model and getting data in JSON format. There are ways to pre-set the ng-model with ng-init as shown below

 <label> Username </label>

 <input id="username"

                      name="username"

                      type="text"

                      disabled="disabled"

                      ng-model="user.username"

                      ng-init="user.username='Vaibhav'"

                      required

>

The above code will create following visual.

We can the same thing with HTML select tag (no multiple) like following with JSTL

<label>Role*</label>

<select id="role" ng-multiple="false" name="role"

            ng-init="user.role='ADMIN'"

            ng-model="user.role"

            required>

             <c:forEach var="role" items="${model.assignableRoles}">

                <option  value="ADMIN">ADMIN</option>

                <option  value="GROUPADMIN">GROUP ADMIN</option>

                <option  value="GROUPMEMBER">GROUP MEMBER</option>

             </c:forEach>

</select>

The output will appear like following.

 

But with HTML select tag where mutiple="multiple" ng-init cannot be used as it is. Providing the array of strings in ng-init is not possible. There is a workaround for that like below.

1.  Create an empty array in ng-init.
2.  Use JSTL <c:if>  to determine whether ng-init will be assigned to option.
3. In ng-init call a JavaScript function in angularjs way.
4. Pass the value to be preselected as a function argument.
5. Make function to push that value into ng-model assigned to select
6.  ${f:groupMatched(group.name,model.assignableGroups) is a JSTL function I created in my working example, its returns boolean after verifying a match. One can replace it with any boolean check.
7. model is server variable representing an object which contains a List of String in variable assignableGroups and name is a String variable in the same object.

<div ng-controller="edit">

<label>Groups*</label>

<select id="groups"

        name="groups"

        multiple="multiple"

        ng-model="user.groups"

        ng-init="user.groups=[]">

             <c:forEach var="group" items="${model.assignableGroups}">

     <option

          title="${group.description}"

          <c:if test="${f:groupMatched(group.name,model.assignableGroups)}">ng-init="preselect('${group.name}')"</c:if>

          value="${group.name}" >

      ${group.name}

      </option>

  </c:forEach>

</select>



adminApp.controller('edit', function($scope) {

    $scope.preselect=function(groupname){

        var data=$scope.user.groups;

        data.push(groupname);

    }

});

For me, it produced something like this.