angularjs - Init jQuery after ng-options were loaded -

i have cshtml file multiselect. have move multiselect being populated .net being populated angularjs. have created select showed below, when page loads, multiselect populated angular added display: none attribute , old jquery multiselect appears no data in it.

my guess when jquery multiselect initialized, there no data present. when angular wants populate multiselect creates new 1 desired values, i'm nt sure why isn't displayed.

<div class="row">     <div class="col-lg-12">         <div class="box">             <div ng-controller="createconfigctrl" class="body">                     <div class="form-group">                         <label class="control-label col-lg-4">configuration name</label>                         <div class="col-lg-8">                             <input type="text" />                         </div>                     </div>                     <div class="form-group">                         <label class="control-label col-lg-4"></label>                         <div class="col-lg-8">                             <select multiple class="multipleselect" ng-multiple="true" ng-model="object" ng-options="obj.name obj in model.xmlcolumns" options-load="model.xmlcolumns" size="16" name="test"></select>                         </div>                     </div>                     <hr />                     <div class="form-group" id="concatfieldstextboxes"></div>                     <div id="buttons" style="clear: left">                         <input type="submit" class="btn btn-primary" value="save config" />                     </div>             </div>         </div>     </div> </div>  <script type="text/javascript">     $(function () {         function initsectionlist() {             $(".multipleselect").each(function (element) {                 var b = $(this);                 if (!b.data('init-multi')) {                     b.multiselect2side({ 'search': 'search: ' });                     b.data('init-multi', true);                 }             });         }          initsectionlist();     }); </script> 

above cshtml page , below createconfigctrl.js

var app = angular.module('pdfconfig.createcontroller', [])  app.controller('createconfigctrl', ['$scope', '$http', function ($scope, $http) {     $scope.model = {};      $http.get('createvm').success(function (data) {         $scope.model = data;     }); }]); 

i've read adding directive $timeout or $watch, don't understand how initialize jquery function after ng-options loaded.

you can use ng-if create ng-options after service response call jquery function $timeout:- html:-

<div class="row">         <div class="col-lg-12">             <div class="box">                 <div ng-controller="createconfigctrl" class="body">                         <div class="form-group">                             <label class="control-label col-lg-4">configuration name</label>                             <div class="col-lg-8">                                 <input type="text" />                             </div>                         </div>                         <div class="form-group">                             <label class="control-label col-lg-4"></label>                             <div class="col-lg-8" ng-if="flag">                                 <select multiple class="multipleselect" ng-multiple="true" ng-model="object" ng-options="obj.name obj in model.xmlcolumns" options-load="model.xmlcolumns" size="16" name="test"></select>                             </div>                         </div>                         <hr />                         <div class="form-group" id="concatfieldstextboxes"></div>                         <div id="buttons" style="clear: left">                             <input type="submit" class="btn btn-primary" value="save config" />                         </div>                 </div>             </div>         </div>     </div>      <script type="text/javascript">              function initsectionlist() {                 $(".multipleselect").each(function (element) {                     var b = $(this);                     if (!b.data('init-multi')) {                         b.multiselect2side({ 'search': 'search: ' });                         b.data('init-multi', true);                     }                 });             }        </script> 

angular js code:

var app = angular.module('pdfconfig.createcontroller', [])  app.controller('createconfigctrl', ['$scope', '$http', function ($scope, $http,$timeout) {     $scope.model = {};     $scope.flag=false;     $http.get('createvm').success(function (data) {         $scope.model = data;          $scope.flag=true;         $timeout(function(){          $(".multipleselect").each(function (element) {                 var b = $(this);                 if (!b.data('init-multi')) {                     b.multiselect2side({ 'search': 'search: ' });                     b.data('init-multi', true);                 }             });       });             }); }]);