ng-model无法在ui-bootstrap角星级中使用

Question

I am trying to create a simple star rating input via angular ui-bootstrap. The code works fine except that the ng-model is not grabbing the value from the model.

Here is the markup:

<div ng-controller="shopperFeedbackController">
        <div class="row feedback-rating-row" >
            <div class="col-sm-16">
                <div class="feedback-label">
                    Rating:
                </div>

                <div class="feedback-rating-star-input">
                    <rating ng-model="rate" <--- Not working
                            max="max_rating" 
                            on-hover="hovering_over(value)" 
                            on-leave="overStar = null" 
                            titles="['one','two','three']" >
                    </rating>
                </div>
            </div>
        </div>
   </div> 

And the code:

snbApp.controller('shopperFeedbackController', function ($scope) {
  $scope.max_rating = 5;
  $scope.rate = 3;
});

Answer 1

I have reproduced your code in a plunker.

The rating code is working, but you have a problem with the CSS row class, in the following line:

<div class="row feedback-rating-row">

See plunker

The row is adding a margin-left: -15px; and the first star goes out of the viewport.

Answer 2

The ui-bootstrap version I was using was 0.13.3. I changed it to the latest (0.13.4) and it worked.