angularjstwitter-bootstrapjquery-select2angularjs-select2

select2.js is not working in ngRepeat AngularJS


I am using AngularJS 1.2.12, select2.js. I have users table where each user has some countries, for this countries i am using select2. but it is not working and it is rendered as normal text box.

    <script type="text/javascript">
<script src="static/js/angular.min.js"></script>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/star-rating.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="static/js/select2.js"></script>
<script src="static/js/admin.js"></script>
<script src="static/js/dirPagination.js"></script>
    </script>
    <table class="table table-striped table-bordered table-hover" id="demo">
            <thead>
              <tr>
                <th width="4%">Sl.No</th>
                <th>Name</th>
                <th width="30%" >Country</th>   
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="x in userObj">
                <td>{{$index+1}}</td>
                <td>{{x.username}}</td>
                  <td>
                  <div class="form-group m0b">
                    <select id="source">
                    <option>india</option>
                    <option>US</option>
                    </select>
           <select multiple name="e9" id="e9" class="populate"></select>
                  </div></td>
                <td><button type="button" class="btn btn-sm btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="on">
    <div class="handle"></div>
 </button></td>
                <td>
                    <button type="button" class="btn btn-default btn-xs edit" data-toggle="modal" title="Update"
                                                    data-target="#recruiters" data-backdrop="static"
                                                    data-keyboard="false"
                                                    ng-click="editRoleBtn(x.username,x.Selected,x.Selected_Admin)">
                                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                                </button>
                  <button type="button" class="btn btn-danger btn-xs del" ng-click="deleteUser(x.username)" data-toggle="modal" data-target="#deleteUser" data-backdrop="static" data-keyboard="false"><i class="fa fa-remove"></i></button></td>
              </tr>
            </tbody>
          </table>

in the country td i am trying to have select2 but its not working


Solution

  • Apply the directive to your form elements:

    <select ui-select2 ng-model="select2" data-placeholder="Pick a number">
        <option value=""></option>
        <option value="one">First</option>
        <option value="two">Second</option>
        <option value="three">Third</option>
    </select>
    

    The ui-select2 directive plays nicely with ng-model and validation directives such as ng-required.

    If you add the ng-model directive to same the element as ui-select2 then the picked option is automatically synchronized with the model value.