title: jQuery Rateyo rating plugin integration with AngularJS
body: <p>I am trying to integrate the <a href="http://rateyo.fundoocode.ninja/" rel="nofollow noreferrer">Rateyo plugin</a> with AngularJS and getting problem in defined rating value from directive, following are codes:</p>
  
  <p><strong>EDIT: Here is the working <a href="https://embed.plnkr.co/K8mItqe42jNvDPs3GjyV/" rel="nofollow noreferrer">plunker</a></strong></p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>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;});  
  });
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>app.directive("rateYo", function() {
      return {
          restrict: "A",
          scope: {
              rating: "="
          },
          template: "&lt;div id='rateYo'&gt;&lt;/div&gt;",
          link: function( scope, ele, attrs ) {
              $(ele).rateYo({
                  rating: String("{{scope.rating}}"),
                  starWidth: "20px",      
                  ratedFill: "#ffce59",
                  readOnly: true          
              });
          }
      };
  });
  </code></pre>
  
  <p><strong>And this is the HTML code</strong></p>
  
  <pre><code>&lt;li ng-repeat="y in names | limitTo: 6"&gt; &lt;a href="&lt;?php echo $this-&gt;config-&gt;item('search_url');?&gt;{{y.hosurl}}"&gt;
    &lt;div class="hospital-card"&gt;
      &lt;div class="hospital-card-img-holder"&gt;
        &lt;div class="hospital-card-img" style="background-image:url({{y.profile_image}});"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;h3 class="vlcc-name" title="{{y.clinic_title}}"&gt;{{y.clinic_name}}&lt;/h3&gt;
      &lt;!--Rating begin--&gt;
      &lt;div class="doc-rete"&gt;
        &lt;div rate-yo class="mc-doc-rating"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--Rating ends--&gt;
      &lt;p class="hospital-specialist"&gt;{{y.rating }} {{y.localty }} {{y.city }}&lt;/p&gt;
      &lt;p class="vlcc-experince"&gt;{{y.clinic_type }}&lt;/p&gt;
      &lt;p class="vlcc-address"&gt;{{y.hos_time }} &lt;/p&gt;
    &lt;/div&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Error in the console is <strong>Invalid Rating, expected value between 0 and 5</strong></p>
  
  <p>But if you see the API, the data is in number, can somebody please see what I am doing wrong here?</p>