AngularJs bootstrap how to get rating value after form submit?

Question 1

Add hoveringLeave method.

Here is fixed code:

JS

 angular.module('plunker', ['ui.bootstrap']);

var RatingDemoCtrl = function ($scope) {

    $scope.myRate = 0;

     $scope.submit = function() {
         console.log($scope.percent) ; 
     }

     $scope.rate = 1;
     $scope.max = 5;
     $scope.isReadonly = false;
     $scope.percent = 20;

      $scope.hoveringOver = function(value,object) {
        console.log('hoveringOver', value);
        $scope.overStar = value;
        $scope.percent = (100 * $scope.overStar) / $scope.max;
      };

       $scope.hoveringLeave = function(rate) {
         console.log('hoveringLeave',  $scope.rate);

       $scope.percent = (100 * $scope.rate) / $scope.max;
      };
    };

HTML

<form class="Scroller-Container" ng-submit="submit()" >
    <rating  value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="hoveringLeave(rate)" ></rating>
    <span class="badge" ng-class="{'badge-warning': percent<30, 'badge-info': percent>=30 && percent<70, 'badge-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

<input type="submit" id="submit" value="Submit" />
</form>

Demo Plunker

Question 2

The reason when you submit $scope.overStar always return null is in your html you have 'on-leave="overStar = null"', so every time your mouse leaves that variable $scope.overStar will be set to null.

The above solution is also not correct, you assume when mouse leave it is time that user pick a rating, mouse leave is not equal click. If you set it that way, you will have more ratings than you really need.

Question 3

I am using Angular 1.2.* with UI Bootstrap 0.10.0 and ng-click works fab for me:

HTML:

<rating value="rate" max="5" ng-click="save(rate)"></rating>

Ctrl:

$scope.save = function (score) { console.log('Rating: ', score); };

Question 4

I would suggest instead of adding another button,you can do a $watch over rate in the scope and check if the value has changed.

$scope.$watch('rate', function(newValue, oldValue) {
    if(newValue!==oldValue){
        alert(newValue+' '+oldValue);
    }
});

if that case occurs you can persist new change.