javascript - Load data into materializecss slider dynamically using Angular ng-repeat not working -

i can hover on slider div , "copy image url" option there data setted correctly slider showing nothing, grey-blank.

if remove classes "slider,slides", of data popped vertically not when using "slider,slides" classes.

i have in main html:

         $(document).ready(function () {               $('.slider').slider();              }); 

my sample json data through request in angular :

      cast: [             {                 cast_id: 0,                 character: "mark watney",                 credit_id: "53e7e85e0e0a266f9a0029aa",                 id: 1892,                 name: "matt damon",                 order: 0,                 profile_path: "/elawpp5blbtwjj35mbgzpl0qkwv.jpg"             },             {                 cast_id: 9,                 character: "melissa lewis",                 credit_id: "5466c78eeaeb8172820008e4",                 id: 83002,                 name: "jessica chastain",                 order: 1,                 profile_path: "/eyv98ylnruoouncd1u6w2yzdra2.jpg"             },             {                 cast_id: 11,                 character: "annie montrose",                 credit_id: "5497ab23c3a368054b0009b4",                 id: 41091,                 name: "kristen wiig",                 order: 2,                 profile_path: "/eqhjl70ypvaycpynqkk62a3pzdd.jpg"             },             {                 cast_id: 13,                 character: "teddy sanders",                 credit_id: "54a7fe92c3a3680c33001972",                 id: 8447,                 name: "jeff daniels",                 order: 3,                 profile_path: "/gai03gcu3dxmyxfympt7huobpi5.jpg"             }           ] 

now setting data angular slider appears grey, can confirm image url hovering on grey area , copying image url. nothing displayed in div.

       <div class="row card-panel" ng-show="castshow">                 <div class="slider">                     <ul class="slides">                         <li ng-repeat="act in actors.cast">                             <img ng-src="http://image.tmdb.org/t/p/original{{act.profile_path}}">                              <div class="caption" style="margin-top: 262px;margin-left:80px;">                                 <h5 class="indigo-text right-align" ng-bind="act.character"></h5>                                 <h6 class="white-text right-align" ng-bind="act.name"></h6>                             </div>                         </li>                     </ul>                 </div>             </div> 

my angularjs code getting , setting data:

      detailsservice.getmoviecredits(mid).then(function (response) {             var json = angular.fromjson(response);             //var cast = json.cast;             $scope.actors = json;             $scope.castshow = true;         }, function (response) {         }); 

i have found work around same. why not create custom event , dispatch when cast response has been fetched? , can attach listener on same custom event , within listener can call $('.slider').slider();.

the angular code part this

detailsservice.getmoviecredits(mid).then(function (response) {         var json = angular.fromjson(response);         $scope.actors = json;         $scope.castshow = true;         //creating custom event slider data loaded         var event = document.createevent('event');         event.initevent('slider-ready',true,true);         document.queryselector('.slider').dispatchevent(event);   }, function (response) {     }); 

then instead of calling $(document).ready(function () {$('.slider').slider();}); main.html have this

$('.slider).on('slider-ready', function (e) {             //adding timeout direct function call not working              settimeout(function(){                  $('.slider').slider();             },1);       }); 

it worked me. helps. hack have come with.