jQuery Flexslider not working with AngularJS

I have been trying to run the JQuery flexslider plugin with AngularJS, but its not working

This is the code I have tried so but no luck :(

This is the html structure

<div class="carousel doctor_listing_front" flexslider>
  <ul class="doctor-container slides">
    <li ng-repeat="v in nameDoctor | limitTo: 12"> <a href="{{v.docurl}}">
      <div class="doctor-card"> <img src="{{v.profile_img}}" width="" height="" />
        <h3 class="vlcc-name">{{v.doc_name}}</h3>
        <div class="doc-rete">
          <rate-yo rating="v.rating" class="mc-doc-rating"></rate-yo>
        </div>
        <p class="doctor-specialist">{{v.area_of_specialization}}</p>
        <p class="vlcc-experince">{{v.localty}}</p>
        <p class="vlcc-address">{{v.city}}</p>
      </div>
      </a> </li>
  </ul>
</div>

This is the Controller

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {   
   $http.get("Frontendapi/doctor_listing")
   .then(function (response) {$scope.nameDoctor = response.data.DoctorList;});
});

And this is the directive

app.directive('flexslider', function () { 
  return {
    link: function (scope, element, attrs) {
      setTimeout(function(){
        element.flexslider({
          animation: "slide",animationLoop: false,itemWidth: 310,itemMargin: 15,pausePlay: false
        });  
      },500);

    }
  }
});

Found couple of post where people have suggested to try it with setTimeOut but using this method flexslider function is fired but no data showing which is being called above and just hiding the UL element

setTimeout(function() {
    $(".doctor_listing_front").flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 310,
        itemMargin: 15,
        pausePlay: false
    });
}, 500);

Can somebody please help!

thanks in advance!