Angularjs ng-repeat pass data to rating controller

Question

So I'm trying to use angularjs ui.boostrap rating component with my app, however i have no idea how to pass from ng-repeat rating value to ratingCtrl. I have tried using ng-init, but it just returns undefined error... Any ideas? (Data should be passed by r.rating)

My template:

<div class="row">
    <div class="col-md-4" id="recipe-list" ng-repeat="r in recipes track by $index">
      <a href="show/{{r.recipe.id}}"><img ng-src="{{r.recipe.image}}"></a>
      <h4><a href="show/{{r.recipe.id}}">{{r.recipe.name}}</a></h4>
      <ul class="list-inline list-ingredients">
        <li ng-repeat="ingredient in r.recipe.ingredients">{{ingredient.name}}</li>
      </ul>
      <div ng-controller="RatingCtrl">
        <rating class="rating" ng-style="success" ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" ng-click="setRating(r.recipe.id)"></rating>

      </div><!-- rating controller end-->
    </div>
  </div>

My controller:

recipeApp.controller('RatingCtrl', function ($scope, $http) {

    $scope.max = 5;
    $scope.isReadonly = false;

    $scope.ratingStates = [
        {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
        {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
        {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
        {stateOn: 'glyphicon-heart'},
        {stateOff: 'glyphicon-off'}
    ];

    $scope.setRating = function(id) {

        var data = {
            rating: $scope.rate,
            id: id
        };

        $http.post('api/rate/recipe', angular.toJson(data), {cache: false})
            .success(function(data){

            })
            .error(function(data){
                alert(data.message);
            });
    };
});