jQuery Rateyo rating plugin integration with AngularJS

I am trying to integrate the Rateyo plugin with AngularJS and getting problem in defined rating value from directive, following are codes:

Controller

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {   
   $http.get("http://mynahcare.info/frontendapi/hospital_list")
   .then(function (response) {$scope.names = response.data.HospitalList;});  
});

Directive

app.directive("rateYo", function() {
    return {
        restrict: "A",
        scope: {
            rating: "="
        },
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            $(ele).rateYo({
                rating: String("{{scope.rating}}"),
                starWidth: "20px",      
                ratedFill: "#ffce59",
                readOnly: true          
            });
        }
    };
});

And this is the HTML code

<li ng-repeat="y in names | limitTo: 6"> <a href="<?php echo $this->config->item('search_url');?>{{y.hosurl}}">
  <div class="hospital-card">
    <div class="hospital-card-img-holder">
      <div class="hospital-card-img" style="background-image:url({{y.profile_image}});"></div>
    </div>
    <h3 class="vlcc-name" title="{{y.clinic_title}}">{{y.clinic_name}}</h3>
    <!--Rating begin-->
    <div class="doc-rete">
      <div rate-yo class="mc-doc-rating"></div>
    </div>
    <!--Rating ends-->
    <p class="hospital-specialist">{{y.rating }} {{y.localty }} {{y.city }}</p>
    <p class="vlcc-experince">{{y.clinic_type }}</p>
    <p class="vlcc-address">{{y.hos_time }} </p>
  </div>
  </a>
</li>

Error in the console is Invalid Rating, expected value between 0 and 5

But if you see the API, the data is in number, can somebody please see what I am doing wrong here?