Select2 is not working in bootstrap modal form

When I am using Select2 in my project creation form that is in the outer loop, it works. The code below is that form.

      <!-- Modal for Creating Project -->
      <div id="createProject" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Create a new project</h4>
            </div>
            <div class="modal-body">
              <form ng-submit="project.createProject()">
                Title: <br>
                <input class="form-control" type="text" name=title ng-model="project.projectData.title" required="true">
                Description: <br>
                <input class="form-control input-lg" type="text" name=description ng-model="project.projectData.description" required="true">
                Assignee: <br> 
                <!-- This is wherer I use Select2 to assign users-->
                <select class="form-control users" id="users" multiple="multiple" style="width: 100%" type="text" ng-model="project.projectData.assigneeID" required="true">
                  <optgroup ng-repeat="eachUser in user.users | filter: search | orderBy: 'lastname' track by $index">
                    <option value="{{eachUser._id}}"> {{eachUser.firstname}} {{eachUser.lastname}} {{eachUser.cname}} </option>
                  </optgroup>
                </select>
                <div class="text-center">
                  <br><button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
                  <button class="btn btn-primary btn-lg" type="submit">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

JS for this Select2 in the controller:

  $(".users").select2({
    tags: true,
    multiple: true,
    data: true,
    createTag: function(params) {
      return undefined;
    }
  });

However, inside the loop I need to use Select2 many times, and none of them work. By isn't working, it only shows the bootstrap class, but the Select2 class isn't working. Here is one of them don't work:

<!-- Modal for Creating Task -->
<div id="createTask{{eachProject._id}}" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Create a new task</h4>
            </div>
            <div class="modal-body">
                <form ng-submit="task.createTask(eachProject._id)">
                    Title: <br>
                    <input class="form-control" type="text" name=title ng-model="task.taskData.taskTitle" required="true">
                    Description: <br>
                    <input class="form-control input-lg" type="text" name=description ng-model="task.taskData.taskDescription" required="true">
                    Assignee: <br>
                    <!-- This is where I use Select2 -->
                    <select class="form-control createTask_Users <!-- This is where I think is the problem, form-control is working but Select2 is not -->" id="createTask_Users" multiple="multiple" style="width: 100%" type="text" ng-model="task.taskData.assigneeID" required="true">
                        <optgroup ng-repeat="eachUser in user.users | filter: search | orderBy: 'lastname' track by $index">
                            <option value="{{eachUser._id}}"> {{eachUser.firstname}} {{eachUser.lastname}} {{eachUser.cname}} </option>
                        </optgroup>
                    </select>
                    <div class="text-center">
                        <br><button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-info btn-lg" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

And here is the JS for it in the controller:

  $(".createTask_Users").select2({
    tags: true,
    multiple: true,
    data: true,
    createTag: function(params) {
      return undefined;
    }
  });

Is there anything wrong? How come the first one works but the rest don't work?

via Chebli Mohamed