how to make dynamic 5 star rating using angularjs?

Question

I have 3 Questions each i have given 5 stars,after user submit i need to convert to 5 how to do this using this formula x1w1 + x2w2 + x3w3 ... xnwn/Total. http://help.surveymonkey.com/articles/en_US/kb/What-is-the-Rating-Average-and-how-is-it-calculate.i have done something but its not right way i think so?

//--------------------------------------review controller--------------
    .controller('ReviewCtrl', [
        '$scope', '$http', '$location', '$window',
        function($scope, $http, $location, $window) {

            $scope.rating1 = {};
            $scope.rating2 = {};
            $scope.rating3 = {};
            $scope.isReadonly = true;
            $scope.rateFunctionone = function(rating) {
                window.localStorage.setItem("rating1", rating);


            };
            $scope.rateFunctiontwo = function(rating) {
                window.localStorage.setItem("rating2", rating);


            };
            $scope.rateFunctionthree = function(rating) {
                window.localStorage.setItem("rating3", rating);


            };
            $scope.submit = function() {
				var bookingid= window.localStorage.getItem("reviewbookingid");
				var storeid = window.localStorage.getItem("reviewstoreid");
				var cusname = window.localStorage.getItem("username").replace(/\"/g, "");
				var rating1 = window.localStorage.getItem("rating1");

                var rating2 = window.localStorage.getItem("rating2");

                var rating3 = window.localStorage.getItem("rating3");


                var totrating = (parseInt(rating1) + parseInt(rating2) + parseInt(rating3)) / 15;
                console.log(totrating);	



                $http.get('******').success(function(data, response) {

                    var totcustomer = data.length + 1;
					var totcustreview =data.length;
					console.log(totcustreview);
                    if (data.length == 0) {

                        var caltotrating = (0 + totrating) / totcustomer;

                    } else

                    {

                        var caltotrating = (parseInt(data[0].Rating) + parseInt(totrating)) / totcustomer;
					

                    }
					
                    var credentials = {};
                    credentials = {
                        "Customet_Name": cusname,
                        "Timely_delivery": rating1,
                        "Quality_of_service": rating2,
                        "Value_for_money": rating3,
                        "Average": totrating,
                        "Rating": caltotrating,
                        "Comments": $scope.command,
                        "Booking_id": bookingid,
                        "Store_id": storeid


                    }
					var scredentials = {};
                    scredentials = {
                        "S_Ratings": caltotrating,
                        "S_Noofpeoplegivenreview": totcustomer,
                           }
					
				$http.put('***').success(function(data, status, headers, config, response) {




                    });
                    $http.post('***').success(function(data, status, headers, config, response) {




                    });

                });


            }
        }
    ])
//---------------------------------------------------------------------
    .directive("starRating", function() {
        return {
            restrict: "EA",
            template: "<ul class='rating' ng-class='{readonly: readonly}'>" +
                "  <li ng-repeat='star in stars' ng-class='star' ng-click='toggle($index)'>" +
                "    <i class='ion-star'></i>" + //&#9733
                "  </li>" +
                "</ul>",
            scope: {
                ratingValue: "=ngModel",
                max: "=?", //optional: default is 5
                onRatingSelected: "&?",
                readonly: "=?"
            },
            link: function(scope, elem, attrs) {
                if (scope.max == undefined) {
                    scope.max = 5;
                }

                function updateStars() {
                    scope.stars = [];
                    for (var i = 0; i < scope.max; i++) {
                        scope.stars.push({
                            filled: i < scope.ratingValue
                        });
                    }
                };
                scope.toggle = function(index) {
                    if (scope.readonly == undefined || scope.readonly == false) {
                        scope.ratingValue = index + 1;
                        scope.onRatingSelected({
                            rating: index + 1
                        });
                    }
                };
                scope.$watch("ratingValue", function(oldVal, newVal) {
                    if (newVal) {
                        updateStars();
                    }
                });
            }
        };
    })

<ion-content  ng-controller="ReviewCtrl"  >
   <form data-ng-submit="submit()">
      <div class="row">
         <div class="col item item-divider">Timely Delivery </div>
         <div class="col item item-divider">
            <div star-rating ng-model="rating1" max="5" on-rating-selected="rateFunctionone(rating)"></div>
         </div>
      </div>
      <br>
      <div class="row">
         <div class="col item item-divider">Quality of Service   </div>
         <div class="col item item-divider">
            <div star-rating ng-model="rating2" max="5" on-rating-selected="rateFunctiontwo(rating)"></div>
         </div>
      </div>
      <br>
      <div class="row">
         <div class="col item item-divider">	Value for Money    </div>
         <div class="col item item-divider">
            <div star-rating ng-model="rating3" max="5" on-rating-selected="rateFunctionthree(rating)"></div>
         </div>
      </div>
      <br>			 
      <ul >
         <li class="item item-checkbox">
            <label  class="checkbox checkbox-energized">
            <input type="checkbox" ng-model="recommend" ng-true-value="'yes'" ng-false-value="'no'">
            </label>
            Would you recommend this dealer to your friends?
         </li>
      </ul>
      <label class="item item-input item-floating-label" >
      <span class="input-label">Say! how you feel</span>
      <textarea placeholder="Say! how you feel" rows="4" ng-model="command"></textarea>
      </label>
      <div class="padding">
         <button class="button  button-full button-stable" type="submit"  > Submit
         </button>
   </form>

   </div>
</ion-content>

Answer 1

Use this RateIt for rating its quite easy you just need bower to install it and include the js and css.