Help to convert jquery rating function into Angularjs

Question

I have a website where I have an evaluation system that’s working well with jquery, now I am making the mobile app of this site and has to have the same evaluation system as I am new in Angularjs I needed your help to convert the script I have in angular work in the app.

Script

<script>
        $(function(){ 
            $("#sent-form-msg").hide();

            $('.rate-btn').mouseenter(function () {
                therate = $(this).data('rate-value');
                css_rate = $(this).data('rate-css');
                $(this).addClass('rate-btn-hover-' + css_rate);
                $("#rating_number").text(therate);
                $("#rating_number_opiniao").text(therate);
                var prevAll = $(this).prevAll().andSelf();
                prevAll.each(function () {
                    $(this).addClass('rate-btn-active-' + $(this).data('rate-css'));
                });
            });
            $('.rate-btn').on('mouseout', function () {
                $(this).removeClass('rate-btn-hover-' + css_rate);
                $("#rating_number").text("-");
                $("#rating_number_opiniao").text("-");
                var prevAll = $(this).prevAll().andSelf();
                prevAll.each(function () {
                    $(this).removeClass('rate-btn-active-' + $(this).data('rate-css'));
                });
            });
            $(document.body).on('click', '.rate-btn', function(e) {
                var logado = "<?= $_SESSION['user_id'] ?>"; 
                if(logado === ''){ 
                    alert("Para avaliar o estabelecimento precisa estar logado aceda ao menu login para entrar na sua conta");
                }else{   
                    var therate = $(this).data('rate-value');
                    var css_rate = $(this).data('rate-css');
                    id_user_rate = "<?= $_SESSION['user_id'] ?>";
                    var dataRate = 'act=rate&post_id=<?= $row->id; ?>&user_id='+id_user_rate+'&rate='+therate; //
                    var rates = $('.rate-btn');
                        rates.removeClass('rate-btn-hover-'+css_rate);
                        $(this).prevAll().andSelf().addClass('rate-btn-active-'+css_rate)
                        $("#rating_number").text(therate);
                        $("#rating_number_opiniao").text(therate);           
                    $.ajax({
                        type : "POST",
                        url : "ajax/processa_avaliacao.php",
                        data: dataRate,
                        success: success()
                    });

                    function success(){
                        $("#avaliacao").load("ajax/mostra-avaliacao.php?id_estabelecimento=<?= $row->id; ?>");
                        $("#numero_votos").load("ajax/mostra-votos.php?id_estabelecimento=<?= $row->id; ?>");
                        $("#sent-form-msg").fadeIn();
                        $("#sent-form-msg").fadeOut(5500).html("<p align='center'>Avaliação Submetida com sucesso! Obrigado pelo seu voto</p>");
                    }
                    return false;
                }                   
            });
        });
    </script>

HTML

<div class="rate-ex1-cnt">
                <div data-rate-value="0.5" class="rate-btn-1 rate-btn" data-rate-css="1"></div>
                <div data-rate-value="1.0" class="rate-btn-2 rate-btn" data-rate-css="2"></div>
                <div data-rate-value="1.5" class="rate-btn-3 rate-btn" data-rate-css="3"></div>
                <div data-rate-value="2.0" class="rate-btn-4 rate-btn" data-rate-css="4"></div>
                <div data-rate-value="2.5" class="rate-btn-5 rate-btn" data-rate-css="5"></div>
                <div data-rate-value="3.0" class="rate-btn-6 rate-btn" data-rate-css="6"></div>
                <div data-rate-value="3.5" class="rate-btn-7 rate-btn" data-rate-css="7"></div>
                <div data-rate-value="4.0" class="rate-btn-8 rate-btn " data-rate-css="8"></div>
                <div data-rate-value="4.5" class="rate-btn-9 rate-btn" data-rate-css="9"></div>
                <div data-rate-value="5.0"class="rate-btn-10 rate-btn" data-rate-css="10"></div>
            </div>

CSS

/*  First Example with big stars */
.rate-ex1-cnt{
    width:100%; height: 40px;
    margin:0px 0px 0px -5px;
}
.rate-ex1-cnt .rate-btn{
    width: 15px; height:40px;
    float: left;
    margin-left: 5px;
    background: url(../img/rating/rate-btn.png) no-repeat;
    cursor: pointer;
}

.rate-ex1-cnt .rate-btn-1:hover, .rate-ex1-cnt  .rate-btn-hover-1, .rate-ex1-cnt  .rate-btn-active-1{
    background: url(../img/rating/rate-btn-hover-0.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-2:hover, .rate-ex1-cnt  .rate-btn-hover-2, .rate-ex1-cnt  .rate-btn-active-2{
    background: url(../img/rating/rate-btn-hover-1.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-3:hover, .rate-ex1-cnt  .rate-btn-hover-3, .rate-ex1-cnt  .rate-btn-active-3{
    background: url(../img/rating/rate-btn-hover-1.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-4:hover, .rate-ex1-cnt  .rate-btn-hover-4, .rate-ex1-cnt  .rate-btn-active-4{
    background: url(../img/rating/rate-btn-hover-2.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-5:hover, .rate-ex1-cnt  .rate-btn-hover-5, .rate-ex1-cnt  .rate-btn-active-5{
    background: url(../img/rating/rate-btn-hover-2.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-6:hover, .rate-ex1-cnt  .rate-btn-hover-6, .rate-ex1-cnt  .rate-btn-active-6{
    background: url(../img/rating/rate-btn-hover-3.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-7:hover, .rate-ex1-cnt  .rate-btn-hover-7, .rate-ex1-cnt  .rate-btn-active-7{
    background: url(../img/rating/rate-btn-hover-3.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-8:hover, .rate-ex1-cnt  .rate-btn-hover-8, .rate-ex1-cnt  .rate-btn-active-8{
    background: url(../img/rating/rate-btn-hover-4.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-9:hover, .rate-ex1-cnt  .rate-btn-hover-9, .rate-ex1-cnt  .rate-btn-active-9{
    background: url(../img/rating/rate-btn-hover-4.5.png) no-repeat;
}
.rate-ex1-cnt .rate-btn-10:hover, .rate-ex1-cnt  .rate-btn-hover-10, .rate-ex1-cnt  .rate-btn-active-10{
    background: url(../img/rating/rate-btn-hover-5.png) no-repeat;
}
/* End first Example with big stars */